所在位置：

安装和使用webpack

admin 前端 前端 webpack

安装和使用webpack

这篇文章里会一步一步地教你如何使用 webpack，内容包括：

  • webpack 5 的安装和命令行运行脚本
  • 生成指定的 html 模板，并引用打包生成的文件
  • 配置 entry 和 output
  • 配置 devServer 服务器和实现热更新
  • 配置 css 和 less
  • 各种图片的处理
  • 配置 babel-loader
  • 配置每次清除生成的文件
  • 加载字体的资源
  • 区分开发环境和生产环境

至于一些相关的概念，请查看webpack的官网，下面是操作的步骤：

确定 node 和 npm 的版本

node -v # node 的版本为 v18.13.0
npm -v  # npm 的版本为 8.19.3

初始化项目

$ mkdir webpack-project
$ cd webpack-project
$ npm init -y

安装 webpack 并在命令行下运行脚本

  • 如果你使用的 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 webpack-cli
# （webpack的版本为 ^5.89.0，webpack-cli 的版本为 ^5.1.4）
npm install webpack webpack-cli -D
# 或者使用npm install webpack@^5.89.0 webpack-cli@^5.1.4 -D
  • 打开 package.json，在 scripts 对象里添加 "build": "webpack --mode production” 这一行，如下：
{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}
  • 新建一个 src/index.js 文件，并编辑输入 console.log(’Hello World’)
  • 运行 npm run build，就会在 webpack-project 目录生成 dist 目录，dist 目录里有 main.js 文件

安装和配置 html-webpack-plugin 插件

  • 这个插件可以动态生成 html 文件并把打包好的 js 引进来，安装如下：
npm install html-webpack-plugin -D
  • 执行 webpack 的时候会默认读取这个 webpack.config.js 文件，新建一个 webpack.config.js，内容如下：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    plugins: [new HtmlWebpackPlugin()]
}
  • 再次运行 npm run build，就会在 dist 目录里生成 index.html 和 main.js 文件，并且 index.html 文件里包含了 main.js 的路径，但这个 index.html 是动态生成的，如果是想指定自己的 index.html 文件，修改 webpack.config.js 的内容如下:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
         // 配置输出文件名
        filename: 'index.html',
        // 配置文件模板
        template: path.resolve(__dirname, 'index.html')
        })
    ]
}

配置入口和输出

  • 默认入口文件是 ./src/index.js，输出默认是 ./dist/main.js，我们可以改变入口和输出的配置，webpack.config.js 的内容如下：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          // 配置输出文件名
          filename: 'index.html',
          // 配置文件模板
          template: path.resolve(__dirname, 'index.html')
        })
    ]
}

安装 devServer 服务器和实现热更新

  • devServer 可以实时地查看页面的变化，在命令行执行下面的代码：
npm i webpack-dev-server -D
  • 打开 package.json，在 scripts 对象里添加 "dev": "webpack server --mode development” 这一行，如下：
{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
        "dev": "webpack server  --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
        "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1"
  }
}
  • 修改 devServer 的配置，编辑 webpack.config.js 的内容：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
          // 配置输出文件名
          filename: 'index.html',
          // 配置文件模板
          template: path.resolve(__dirname, 'index.html')
        })
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
  }
}
  • 修改 src/index.js 里的内容，修改如下：
if (module.hot) {
  module.hot.accept();
}

console.log(’Hello World’)
  • 再次运行 npm run dev，就会自动打开浏览器，并重定向到 http://localhost:9999 ，修改 src/index.js 文件的内容，就可以实现热更新了

安装 css 和 less 相关的 loader

  • 在命令行执行下面的代码：
npm install style-loader css-loader less-loader -D
  • 创建 less 文件，在命令行执行下面的代码：
cd webpack-project
cd src
mkdir assets
mkdir css less
touch css/reset.css less/index.less
  • 修改 reset.css 的内容如下：
body {
    margin: 0;
    padding: 0;
}
  • 修改 index.less 的内容如下：
body {
    background: #ccc;
}
  • 修改 src/index.js 文件，内容如下：
import './assets/css/reset.css'
import './assets/less/index.less'

console.log('test')
  • 修改 webpack.config.js 文件，内容修改如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
    }
}

处理各种图片

  • 安装 url-loader，在命令行执行下面的代码：
npm install url-loader -D

  • 在 src/assets/ 目录新建个 img 的目录，放一张png的图片

  • 修改 src/index.js 文件，内容如下：

import './assets/css/reset.css'
import './assets/less/index.less'
import banner from './assets/img/banner.png'

console.log(banner)
  • 修改 webpack.config.js 文件，内容修改如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解释图片
            {
                test: /\.(jpg|gif|jpeg|png)$/,
                use: [
                    // 生成 base64位的图片
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
    }
}
  • 运行 npm run dev，就会在浏览器的控制台上看到base64的图片了

安装babel相关的loader

  • 在命令行执行下面的代码：
npm install @babel/core @babel/preset-env babel-loader -D
  • 在根目录下创建一个 .babelrc 文件，内容如下：
{
    "presets": [
        "@babel/preset-env"
    ]
}
  • 修改 webpack.config.js 文件，内容修改如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 js 文件
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解释图片
            {
                test: /\.(jpg|gif|jpeg|png)$/,
                use: [
                    // 生成 base64位的图片
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
    }
}

清除生成的文件，安装 clean-webpack-plugin 插件

  • 在命令行执行下面的代码：
npm install clean-webpack-plugin -D
  • 修改 webpack.config.js 文件，内容修改如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 js 文件
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解释图片
            {
                test: /\.(jpg|gif|jpeg|png)$/,
                use: [
                    // 生成 base64位的图片
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html')
        }),
        // 每次清除生成的文件
        new CleanWebpackPlugin()
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
    }
}
  • 运行 npm run build，就会把之前的 dist 目录删除，并生成新的dist目录

配置字体的资源文件

  • 安装相关的 file-loader，在命令行执行下面的代码：
npm install file-loader -D
  • 修改 webpack.config.js 文件，内容修改如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: './src/index.js',
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 js 文件
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解释图片
            {
                test: /\.(jpg|gif|jpeg|png)$/,
                use: [
                    // 生成 base64位的图片
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            // 解释字体的资源
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            template: path.resolve(__dirname, 'index.html')
        }),
        // 每次清除生成的文件
        new CleanWebpackPlugin()
    ],
    devServer: {
       port: 9999,
       open: true,
       hot: true
    }
}

  • 在 src/assets 目录下新建一个 font 目录，把下载的字体放到这个目录

  • 修改 src/assets/less/index.less 文件，内容如下：

@font-face {
    font-family: 'douyinmeihaoti';
    src: url('../font/douyinmeihaoti.otf') format('truetype');
}

body {
    font-family: 'douyinmeihaoti';
    background: #ccc;
}

区分开发环境和生产环境

  • 在根目录新建一个 build 目录，在 build 新建三个文件，操作如下：
cd webpack-project
mkdir build
touch build/webpack.base.config.js 
touch build/webpack.dev.config.js 
touch build/webpack.prod.config.js
  • 安装需要的包：操作如下：
npm install webpack-merge mini-css-extract-plugin -D
  • webpack.base.config.js 文件的内容如下：
const path = require('path')
const webpack = require('webpack')

module.exports = {
    // 入口
    entry: path.resolve(__dirname, '../src/index.js'),
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, '../dist'),
        // 文件名
        filename: '[name].js'
    },
    module: {
        rules: [
            // 解释 js 文件
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            // 解释图片
            {
                test: /\.(jpg|gif|jpeg|png|svg)$/,
                use: [
                    // 生成 base64位的图片
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            // 解释字体的资源
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader'
            }
        ]
    }
}
  • webpack.dev.config.js 文件的内容如下：
const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BaseWebpackConfig = require('./webpack.base.config.js')

module.exports = merge(BaseWebpackConfig, {
    mode: 'development',
    module: {
        rules: [
            // 解释 css 文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            // 配置文件模板
            template: path.resolve(__dirname, '../index.html')
        })
        // 每次清除生成的文件
        // new CleanWebpackPlugin()
    ],
    devServer: {
        port: 9999,
        open: true,
        hot: true
    }
})
  • webpack.prod.config.js 文件的内容如下：
const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BaseWebpackConfig = require('./webpack.base.config.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = merge(BaseWebpackConfig, {
    mode: 'production',
    module: {
        rules: [
            // 解释 css 文件
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // 解释 less 文件
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/style.css'
        }),
        new HtmlWebpackPlugin({
            // 配置输出文件名
            filename: 'index.html',
            // 配置文件模板
            template: path.resolve(__dirname, '../index.html')
        }),
        // 每次清除生成的文件
        new CleanWebpackPlugin()
    ]
})
  • 修改 package.json 文件，修改 “build” 和 “dev” 两行的内容，内容修改如下：
"build": "webpack --progress --config build/webpack.prod.config.js",
"dev": "webpack server --config build/webpack.dev.config.js"
  • 运行 npm run dev 和 npm run build，查看效果

【上一篇】Nginx 的常用配置

【下一篇】canvas的基础知识

相关文章