webpack安装和配置

1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件，最终生成浏览器可以识别的资源html.css图片，js

2.安装

win r输入cmd 唤出系统控制面板 然后进入本地目录

首先在本地目录创建一个文件夹，例如mypack,然后cd /mupack，然后输入以下命令

cd /mypack

npm init -y

npm i webpack webpack-cli -D

3.配置

打开vscode将创建好的mypack文件夹添加进去，然后创建一个webpack.config.js文件在里面输入以下代码进行配置

1.  
   const path = require('path')
2.  
   module.exports ={
3.  
   //入口
4.  
   entry:'./src/main.js',
5.  
   //输出
6.  
   output:{
7.  
   //目录：当前目录，下的dist目录
8.  
   path:path.resolve(__dirname,'dist'),
9.  
   //打包好的文件名
10.  
    filename:'bundle.js'
11.  
    },
12.  
    //模式
13.  
    mode:"production", //development 开发模式 production 产品模式
14.  
    //插件
15.  
    plugins:[
16.  
    new HtmlWebpackPlugin({
17.  
     
18.  
    })
19.  
    ]
20.  
    }

4.运行

在开发模式下运行，命令行输入npx webpack在产品模式下可以用npm run bulid 如果在package.json下配置了

1.  
   "scripts":{
2.  
   "serve":"webpack"
3.  
   }

则可以使用npm run serve运行

5.插件

1、HotModuleReplacementPlugin

的热更新是依赖于 webpack -dev-server，另外是在打包文件更改时更新打包文件或者重新加载刷新整个页面，HRM是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的，所以♡webpack后，在插件配置项中直接使用即可。

const webpack = require('webpack')plugins: [  new webpack.HotModuleReplacementPlugin(), // 热更新插件]

2、html -webpack-plugin

生成html文件。将webpack中条目配置的相关入口大块和extract-text-webpack-plugin的css样式插入到该插件提供的模板或模板内容配置项指定的内容基础上生成一个html文件，具体插入方式是将样式链接插入到head元素中，脚本插入到head或者body中。

const htmlWebpackPlugin = require('html-webpack-plugin')plugins: [  newhtmlWebpackPlugin({    filename: 'index.html',    template: path.join(__dirname, '/index.html'),    minify: {      // 压缩html文件      removeComments: true, // 移除html中的注释      collapseWhitespace: true, // 删除空白符与换行符      minifycss: true, // 压缩内联css    },    inject: true,  }),]

注入有四个选项值

• true：默认值，script标签位于html文件的body底部

• body：script标签置于html文件的body底部（同true）

• head：script标签放在head标签内

• false：不插入生成的js文件，只是单纯的生成一个html文件

多页应用打包

有时，我们的应用不一定是一个单页应用，或者一个多页应用，那么如何使用webpack进行打包呢。

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {  entry: {    index: './src/index.js',    login: './src/login.js',  },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[hash:6].js',  },  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名    }),  ],}

如果需要配置多个HtmlWebpackPlugin，则文件名不可更改，否则生成的都是index.html。

但是有个问题，index.html和login.html会发现，都同时约会了index.f7d21a。js 和login.f7d21a。js，通常这不是我们想要的，我们希望index.html中止日期index.f7d21a。js，login.html只保留login.f7d21a。js。

HtmlWebpackPlugin提供了一个块的参数，可以接受一个数组，配置此参数唯一的插入数组中指定的js日期到html文件中。

module.exports = {  //...  plugins: [    new HtmlWebpackPlugin({      template: './public/index.html',      filename: 'index.html', //打包后的文件名      chunks: ['index'],    }),    new HtmlWebpackPlugin({      template: './public/login.html',      filename: 'login.html', //打包后的文件名      chunks: ['login'],    }),  ],}

这样执行 npm run build，可以看到index.html中唯一约会了index的js文件，而login.html中也只有约会了login的js文件。

3、clean-webpack-plugin

clean-webpack-plugin用于在打包前清理上一次项目生成的捆绑文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [  new HtmlWebpackPlugin({    template: path.join(__dirname, '/index.html'),  }),  new CleanWebpackPlugin(), // 所要清理的文件夹名称]

4.terser-webpack-plugin

terser-webpack-plugin主要用于js优化

1.  
   //js优化
2.  
   const TerserPlugin = require('terser-webpack-plugin')
3.  
   module.exports ={
4.  
   //优化
5.  
   optimization:{
6.  
   minimize:true,
7.  
   minimizer:[new CssMinPlugin(),new TerserPlugin()]
8.  
   },}

5.css-minimizer-webpack-plugin

css-minimizer-webpack-plugin主要用于css优化

1.  
   //css优化
2.  
   const CssMinPlugin =require('css-minimizer-webpack-plugin')
3.  
   module.exports ={
4.  
   //优化
5.  
   optimization:{
6.  
   minimize:true,
7.  
   minimizer:[new CssMinPlugin(),new TerserPlugin()]
8.  
   },}

6、迷你CSS提取插件mini-css-extract-plugin

将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap。只能用在webpack4中，

1.  
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = //插件
2.  
   plugins:[
3.  
   new HtmlWebpackPlugin({template:'./public/index.html'}),
4.  
   new CleanWebpackPlugin(),
5.  
   new MinCssExtractPlugin({filename:'style-[hash:7].css'}),
6.  
   new VueLoaderPlugin()
7.  
   ],
8.  
   module:{
9.  
   rules:[
10.  
    {test:/\.vue$/i,use:['vue-loader']},
11.  
    {test:/.(png|jpg|jepg|gif|webp|ico)$/,
12.  
    use:[{
13.  
    loader:'url-loader',options:{limit:1024,name:'images/[name]-[hash:7].[ext]'}
14.  
    }]
15.  
    },
16.  
    {test:/\.css$/,use:[
17.  
    MinCssExtractPlugin.loader,
18.  
    "css-loader"
19.  
    ]}
20.  
    ]
21.  
    },

6.loader处理器

处理文件，默认支持js与json，

css-loader 处理css

style-loader 把css加载到style标签

file-loader 处理文件地址

url-loader 处理文件地址把小图片转为base64 省一次网络请求

7.本地服务器配置webpack-dev-server

安装插件 npm i webpack-dev-server -D

在package.json中

scripts:{"serve":"webpack.serve"}

在webpack.config.js中

1.  
   //npm i webpack-dev-server -D
2.  
   devServer:{
3.  
   proxy:{},//代理
4.  
   host:"localhost",//域名
5.  
   port:8080,//端口好
6.  
   hot:true,//热更新
7.  
   open:true,//自动打开浏览器
8.  
   },

8.设置别名

在webpack.config.js中

1.  
   resolve:{
2.  
   "alias":{
3.  
   //设置src别名
4.  
   "@":path.resolve(__dirname,"src"),
5.  
   }
6.  
   },