这是我参与「第五届青训营」笔记创作活动的第6天

webpack

要求

运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)

webpack安装

npm install -D webpack webpack-cli

打包

添加src/index.js和index.html作为入口

在package.json中script添加"build":"webpack"

运行npm run build

打包代码将会输出在dist文件夹

使用配置文件

新建webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

管理资源

加载CSS

为了在javascript中加载css，需要安装插件style-loader和css-loader

在webpack.config.js中添加

module:{
rules:[
    {
        test:/.css$/i,
        use:['style-loader','css-loader']
    }
]
}

接下来，在js文件中直接import css文件即可

加载image

添加规则

{
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

加载font

添加规则

{
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },

管理输出

模板

安装插件htmlwebpackplugin

在webpack.config.js中引入，并添加插件

 plugins: [
    new HtmlWebpackPlugin(),
  ],

清理输出文件夹

在每次重新构建后清理输出文件夹，在output中添加clear:true

开发环境

使用开发工具

现将webpack.config.js 中mode:development

watch mode

package.json 中script添加

{
"watch":"webpack --watch"
}

在每次修改代码后，代码会被重新编译，无需手动运行构建

使用webpack-dev-server

npm install webpack-dev-server

修改webpack.config.js

添加

devserver:{
static:'./dist'
}