前言

本篇内容是为了熟悉webpack配置进行的练习，搜索webpack.docschina.org/guides/官网指南进行的配置实操。

实战记录

当前目录：

css文件处理

使用场景：需要在js文件中引入css文件，对css文件进行解析运用到指定dom上
问题解决：
 css-loader+style-loader

1.在入口文件中index.js里导入css文件：

此时进行打包，会提示错误。大致意思就是js文件无法识别css。

2.如何让css在js引入中不报错，且自动添加到html的style中呢？在webpack.config.js文件中配置loader规则：

此时重新进行打包，浏览器中查看dom结构，会发现head中存在css文件中书写的样式：

图片处理配置+font字体

使用场景
1.在css中存在url('./icon.jpg')
2.在js中导入本地图片
3.使用js在html中插入img标签

解决方法：
在webpack.config.js的module中配置loader规则
  module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ],

    },
    
 补充：针对font字体的处理，与上述同理
 使用场景：
 css文件中对字体文件的加载：
 @font-face {
  font-family: 'MyFont';
  src: url('./my-font.woff2') format('woff2'),
    url('./my-font.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}


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

没有配置loader规则，在js文件中导入本地图片是会报错的：

加入配置之后，打包后会将图片单独抽离出来，并将开发时的本地文件路径替换成打包之后的真正路径：

打包之后页面正常显示：

多文件输出

配置：
    entry: {
        index: './src/index.js',
        print: './src/print.js',
      },
    output: {
        // filename: 'bundle.js',//在js中引入css文件，并解析放到dom中
        filename:'[name].bundle.js',
        // path: path.resolve(__dirname, 'dist'),
        path: resolveApp('dist')
    },

打包结果：

HtmlWebpackPlugin

作用：
打包的时候自动生成html文件，并且将打包的主文件路径添加到里面

清理dist文件

在每次打包前，都先将之前的dist文件进行清空操作

打包编译后的代码错误映射到源码

 devtool: 'inline-source-map',

实施监听自动编译

如果在每次更改完成代码之后，希望自动重新编译，更新页面内容。可以借助以下工具
1."watch": "webpack --watch" webpack提供的mode观察模式
2. webpack-dev-server (https://github.com/webpack/webpack-dev-server) 此方法是最常用的，简称热更新
3. webpack-dev-middleware(https://github.com/webpack/webpack-dev-middleware)
这种方式更像是事实监听，将编译好的页面挂载到后台服务器上进行显示，webpack-dev-middleware 则是两者之间的桥接

代码分离

场景：通常在对项目进行优化的时候，会采用代码分离的方式，减小首次加载chunk.js的大小，从而减少加载时间
分离chunk.js的方式：
1.在entry中配置多文件输出
entry: {
        index: './src/index.js',
        another: './src/another-module.js',
        //以下是手动抽离公共模块的方式
        // index: {
        //     import: './src/index.js',
        //     dependOn: 'shared',
        // },
        // another: {
        //     import: './src/another-module.js',
        //     dependOn: 'shared',
        // },
        // shared: 'lodash',
    },
    注意：多文件入口需要添加以下配置：
     optimization: {
          runtimeChunk: 'single',
     },

补充：若开发者知晓多文件入口的公共模块，为了避免多文件打包编译后都存在重复模块，可以将公共模块手动抽离出来
2. SplitChunksPlugin插件
 optimization: {
     splitChunks: {
       chunks: 'all',
     },
   },

拆分bound可以借助的工具

将 CSS 从主应用程序中分离 —— mini-css-extract-plugin
简单说就是将每一个js中的css文件都抽离出来，作为一个单独的文件

配置步骤：
npm install --save-dev mini-css-extract-plugin
webpack.config.js中配置以下信息：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
  plugins: [
        //将css文件单独抽离
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: devMode ? "[name].css" : '[name].[hash].css',
            chunkFilename: devMode ? "[id].css" : '[id].[hash].css'
        })
    ],
 module: {
        rules: [
            {
                test: /\.css$/i,
                use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
                //顺序是从右往左解析
            }
        ],

    },

webpack配置实战

前言