webpack配置

图片资源打包 file-loader url-loader

            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        //占位符号
                        name: '[name]_[hash].[ext]',
                        //速出路径
                        outputPath: 'imgages/',
                        //限制资源大小
                        limit: 120000
                    }
                }
            }
复制代码

css-loader style-loader less-loader node-sass sass-loader postcss

1. style-loader:在需要的html中加入link标签引入css
2. css-loader:解析引入的各个方式引入的css文件s
3. less-loaserless文件编译
4. node-sass sass-loader:编译sass
5. postcss:css预处理器

{
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader',
        //需要
        options: {
            importLoaders: 2
        }
    }, {
        loader: 'less-loader'
    }, {
        loader: 'postcss-loader'
    }]
}
复制代码

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
    //配置模板文件
    template: 'src/html/index.html',
    title:'xuyanxu.cn',
    filename:'index.html'
})
复制代码

clean-webpack-plugin 清理打包后的结果

new webpack.HotModuleReplacementPlugin()

output配置

babel

1. 文档https://www.babeljs.cn/setup#installation

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options:{
        // 配置使用porset
        // presets: [["@babel/preset-env",{
        //     //当添加特性的时候，，按需添加,可以根据不同浏览器版本实现
        //     targets: {
        //         edge: "17",
        //         firefox: "60",
        //         chrome: "67",
        //         safari: "11.1",
        //       },
        //     useBuiltIns: "usage",
        // }]]
        // 制作组件库的时候在windown中添加不合适，这使用下面的方式
        plugins: [
            [
              "@babel/plugin-transform-runtime",
              {
                "absoluteRuntime": false,
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
              }
            ]
          ]
    }
    }
复制代码

2.部分浏览器还没有一些新浏览器的api故需要使用polyfill，地址：www.babeljs.cn/docs/babel-…

配置Tree Shaking

optimization:{
    usedExports:true
}
复制代码

package.json中配置

sideEffects:[]
复制代码

develoment和production

1. devServer去掉
2. devetool修改为cheap-module-source-map
3. mode修改为production
4. 热更新去掉
5. optimization去掉
6. 使用webpack-merge合并

code Splitting 代码分割

 optimization: {
    splitChunks: {
        chunks: 'all'
    }
}
复制代码

转载于:https://juejin.im/post/5ceaae345188252d2025cf09