webpack总结

---

---

webpack

从项目入口文件开始，装载转换所有文件，优化处理文件，生成最终发布文件
重要概念：入口(main.js)，出口(dist)，装载器loader，plugin.

装载器loader

Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
装载器loader, 装载并转换(css,less) ,
常用它装载器loader

less-loader less转化css
css-loader 加载 CSS，支持模块化、压缩、文件导入等特性
style-loader 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
babel-loader 把 ES6 转换成 ES5
file-loader 在js中加载图片
html-withimg-loader需要html直接作用
url-loader 可以把小图片转成base64, 减少http请求
需要postcss-loader, 在根目录添加postcss.config.js,
还要在package.json配置browserslist
MiniCssExtractPlugin.loader 样式分离装载器

插件plugin

Plugin可以扩展webpack的功能，让webpack具有更多的灵活性
plugin, 文件的处理(压缩，混淆，合并等)

optimize-css-assets-webpack-plugin css压缩插件
terser-webpack-plugin js压缩插件
html-webpack-plugin 将打包后的js自动添加到html插件
mini-css-extract-plugin 样式分离插件

代理

注意:打包后没有proxy配置了，即proxy只在开发时有效

在devServer中proxy中的target属性去配置同一个源
如果有前缀 就是用pathRewrite去替换它

热加载

HOT MODULE REPLACEMENT [HMR]
默认刷新整个页面
HMR: 只会局部更新
当修改子文件时，不会刷新整页面

使用插件 new webpack.HotModuleReplacementPlugin() //热更新插件

plugins: [
        new webpack.HotModuleReplacementPlugin()  //热更新插件
    ]

多页面处理

多个入口
多个入口文件 需要一个个指定
多个输出文件 [name].js
打包输出了多个js文件， 需要把js文件添加到html 需要html-webpack-plugin
通过chunks指定不同的html页面引用不同的js文件

module.exports = {
    mode: 'development',
    entry: { //配置入口
        home: './src/index.js',
        other: './src/other.js'
    },
    output: { //输出目录   输出多个文件home.js  other.js
        filename: "[name].js",  //动态输出多个文件
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板文件
            filename: 'home.html',        //生成的html文件
            chunks: ['home']              //html文件中引用的js
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'other.html',
            chunks: ['home', 'other']
        })
    ]
}