webpack总结

短命女 2022-10-30 06:29 134阅读 0赞

--------------------

### 文章目录 ###

*  webpack
 *  装载器loader
 *  插件plugin
 *  代理
 *  热加载
 *  多页面处理

--------------------

# 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']
            })
        ]
    }