本文共 9886 字，大约阅读时间需要 32 分钟。

使用webpack的步骤

webpack安装的插件或者loader使用的时候加载的方式是自右向左，自下而上的顺序加载。

• 初始化一个项目 npm init -y (也可以使用 npm init 回车 自主配置)

npm i  webpack webpack-cli  --save-dev// --save 就是说要把当前安装的包的信息存放到package.json中; //-dev 相当于告诉webpack 这个包是开发所需要的依赖npm i  webpack webpack-cli  -Dnpm i  webpack webpack-cli --dev // 不能保证当前这个包一定会体现在package.json中npm i jquery --save 就是说要把当前安装的包的信息存放到package.json中 默认是生产依赖npm i jquery -S  // -S == --savenpm i jquery //默认是安装到生产环境

• loader：主要用来处理文件的， 将不是js的文件编译成JS可识别的文件
• plugins：

清空文件

:每次构建前清理 /dist 文件夹

安装 cnpm install clean-webpack-plugin -D

安装成功后的package.json

"devDependencies": {       "clean-webpack-plugin": "^3.0.0",  }

webpack.config.js

const path = require("path");const {    CleanWebpackPlugin } = require("clean-webpack-plugin"); // 引入清空文件插件module.exports={   	entry:"./src/index.js",	output:{   		path:path.resolve(__dirname,"dist"),		filename:"bundle.js"	},	plugins:[ //插件		new CleanWebpackPlugin({   			//cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],			//'**/*':匹配的文件			//'!static-files*'：不清除的文件		}),//每次清空dist中的老文件	]}

生成html，自动添加资源文件

:该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

安装 cnpm install -D html-webpack-plugin / yarn add --dev html-webpack-plugin

安装成功后的package.json

"devDependencies": {      "html-webpack-plugin": "^4.5.0",  }

webpack.config.js

const path = require("path");const {    CleanWebpackPlugin } = require("clean-webpack-plugin");// 引入清空文件插件const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports={   	entry:"./src/index.js",	output:{   		path:path.resolve(__dirname,"dist"),//		filename:"bundle.js"	},	plugins:[	new CleanWebpackPlugin(),//每次清空dist中的老文件	new HtmlWebpackPlugin({   		title:"My App", //用于生成的HTML文档的标题		filename:"dist/admin.html", //写入HTML的文件。默认为index.html。可以指定一个子目录		template:"public/index.html ", //指定webpack模板的相对或绝对路径。默认使用src/index.ejs		hash:, //如果是true,则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用		chunks:, //仅允许您添加一些块（例如，仅单元测试块）		minify:true ,//控制是否以及以何种方式最小化输出。默认false	}),//简化HTML文件的创建,自动引入js文件	]}

修改title，需要结合HTML的title属性。

• 每次修改配置文件都需要重新run一下配置服务。

多模块配置项（多入口多出口配置）

webpack.config.js

const path = require("path");const {    CleanWebpackPlugin } = require("clean-webpack-plugin");// 引入清空文件插件const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports={   	entry:{   	index:"./src/index.js",	other:"./src/other.js",	common:"./src/common.js",	},	output:{   		path:path.resolve(__dirname,"dist"),		filename:"[name].[hash:5].js",//不限制个数默认是20位	},	plugins:[	new CleanWebpackPlugin(),//每次清空dist中的老文件	// ...html(),	new HtmlWebpackPlugin({   		filename:"assets/index.html", 		template:"public/index.html ", 		chunks:["index","common"],			}),	new HtmlWebpackPlugin({   		filename:"assets/other.html", 		template:"public/other.html ", 		chunks:["other","common"],	}),	]}/*把HTML编译提出来 function html(){	var ary = ["index","other"];	var arr = [];	ary.forEach(item+>{		arr.push(			new HtmlWebpackPlugin({				filename:`assets/${item}.html`, 				template:`public/${item}.html`, 				chunks:[item,"common"],			})		)	return arr;})}*/

webpack 服务

将webpack与提供实时重载的开发服务器一起使用。这应该仅用于开发。

安装 npm install webpack-dev-server --save-dev

虽然可以全局安装和运行webpack-dev-server，但建议在本地安装。webpack-dev-server将始终在全局安装中使用本地安装。

1.使用CLI

使用它的最简单方法是使用CLI。在您所在的目录中 webpack.config.js，运行：

node_modules / .bin / webpack-dev-server 在终端运行以下命令 npm run webpack-dev-server

2.使用NPM脚本

NPM package.json

"scripts": {     "start:dev": "webpack-dev-server"}

在终端运行以下命令：npm run start:dev ;

NPM将自动为您引用node_modules二进制文件，并执行文件或命令。 此处安装使用时出了几次问题，最后采用了webpack，webpack-cli降级处理正常了

配置 webpack.config.js

两种方式都可以配置 webpack.config.js

var path = require('path');module.exports = {     //...  output: {       filename: 'bundle.js',//output.filename设置为'bundle.js'  },  devServer: {      headers: {   'X-Custom-Foo': 'bar'},//将标头添加到所有响应：    contentBase: path.join(__dirname, 'dist'), //静态资源路径    compress: true,//是否压缩    port: 9000, //端口号    open:true,//服务启动之后自动打开页面    lazy: true,//惰性模式    filename: 'bundle.js',//仅在需要时编译捆绑软件/bundle.js。     //filename在不使用惰性模式的情况下不起作用。    host: '0.0.0.0',//指定要使用的主机,使服务器可从外部访问    hot: true, //启用webpack的热模块更换功能  }};

启动服务器后，已解析模块列表之前将出现一条消息：

http://localhost:9000/webpack output is served from /build/Content not from webpack is served from /path/to/dist/

webpack常见报错处理方式:

• 语法问题
• 版本问题（版本不支持）
• 丢包，cnpm和yarn混用经常会导致丢包问题，重新安装，不要混用包管理器
• 提示没有权限时，删除编译好的dist文件重新编译。

CSS配置

从 JavaScript 模块中 import 一个CSS文件，需要，让js识别它，添加到页面中，或者单独提出来称为一个css文件，引入到页面中。

编译css

css-loader ：把css编译成js可识别的语法

style-loader：把处理成JS的css，通过style标签插入到页面，真实项目一般不会使用style插入css

安装：npm install --save-dev css-loader style-loader

webpack.config.js

module.exports = {     module: {       rules: [      {           test: /\.css$/i,        use: ['style-loader', 'css-loader'],      },    ],  },};

提取CSS

：将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。

建议mini-css-extract-plugin与css-loader结合使用

与extract-text-webpack-plugin相比：

• 异步加载
• 没有重复的编译（性能）
• 更容易使用
• 特定于CSS

安装：npm install --save-dev mini-css-extract-plugin

style.css

body {     background: green;}

index.js

import './style.css';

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = {     plugins: [new MiniCssExtractPlugin({   	filename:"css/[name].css",//此选项确定每个输出CSS文件的名称	})],  module: {       rules: [      {           test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, 'css-loader'],      },    ],  },};

处理css前缀

: 处理css前缀，需要安装postcss-loader和postcss

安装：npm install --save-dev postcss-loader postcss

file.js

import css from "file.css";

webpack.config.js

module.exports = {     module: {       rules: [      {           test: /\.css$/i,        use: [          "style-loader",          "css-loader",         "postcss-loader",//适配css方法一：结合postcss.config.js使用         /*         //适配css方法二:		{           loader: "postcss-loader",           options: {             postcssOptions: {               plugins: [                 ["autoprefixer"],               ],             },           },         },		*/        ],      },    ],  },};

PostCSS预设环境：

需要安装postcss-preset-env：npm install --save-dev postcss-preset-env

postcss-preset-env包括autoprefixer

postcss.config.js（postcss的适配文件）

module.exports = {     plugins: [    ["postcss-preset-env"],  ],};

.browserslistrc（告诉webpack，适配99%的浏览器）

cover 99.9%

postcss 的配置步骤

可以处理css的兼容写法，转义rem，处理less，sass文件

1. 安装postcss 和 postcss-loader
2. 在处理对应的css文件之前 先加上 postcss-loader
3. 配置postcss所需要的配置项 postcss.config.js (需要安装postcss-preset-env)
4. 设置浏览器的兼容版本 .browserslistrc 文件

编译less文件

用于webpack的Less loader。将less 编译为CSS。

需要安装less和less-loader

安装：npm install less less-loader --save-dev

webpack.config.js

let MiniCss = require('mini-css-extract-plugin')module.exports = {   plugins: [    new CleanWebpackPlugin(),    new MiniCss({         filename: 'css/[name].css'    })  ],  module: {       rules: [      {           test: /\.less$/,        loader: [  MiniCss.loader,'css-loader','less-loader', 'postcss-loader']       },    ],  },};/*MiniCss.loader,	4.把css提取出来插入的到页面中'css-loader',	3.吧css-loader编译成JS可识别的语法'less-loader', 	2.编译less成css'postcss-loader'1 添加前缀*/

压缩css

方法一：optimize-css-assets-webpack-plugin

：优化\最小化CSS。

安装：npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.js

var OptimizeCss = require('optimize-css-assets-webpack-plugin');module.export = {   optimization:{   minimizer: [	new OptimizeCss (),//当压缩css之后，JS就不会自动压缩了]}}

方法二：css-minimizer-webpack-plugin

优化和缩小CSS。就像optimize-css-assets-webpack-plugin一样，但是使用查询字符串对源映射和资产更准确时，它可以缓存并在并行模式下工作。

安装 npm install css-minimizer-webpack-plugin --save-dev

webpack.config.css

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {     module: {   	  plugins: [	    new MiniCss({   	      filename: 'css/[name].css'	    })	  ],    loaders: [      {           test: /.s?css$/,        use: [MiniCss.loader, 'css-loader', 'sass-loader'],      },    ],  },  optimization: {       minimize: true,    minimizer: [    	new CssMinimizerPlugin(),//当压缩css之后，JS就不会自动压缩了    ],  },};

配置JS

处理JS

webpack 处理 JS 需要借助 babel ：使用Babel和webpack转换JavaScript文件。

需要安装的插件：babel-loader @babel/core @babel/preset-env

babel的预设 presets 就是插件的集合

babel的插件 plugins 你要使用的预设中没有包含的插件

安装：npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {     rules: [    {         test: /\.js$/,      exclude: /node_modules/,      use: {           loader: 'babel-loader',        options: {             presets: [['@babel/preset-env']   ],                    plugins:  [ //两个插件顺序不能错          	["@babel/plugin-proposal-decorators", {    "legacy": true }],          	//编译ES高级语法 需要安装：类的装饰器          	//安装：npm install --save-dev @babel/plugin-proposal-decorators    		["@babel/plugin-proposal-class-properties", {    "loose" : true }],    		//编译ES高级语法 需要安装：箭头函数，类等语法          	//npm install --save-dev @babel/plugin-proposal-class-properties    	],        }      }    }  ]}

压缩JS

使用terser来缩小JavaScript。如果可能会因为版本问题报错建，可以降到@4.0.0

安装 npm install terser-webpack-plugin --save-dev

webpack.config.js

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');const TerserPlugin = require('terser-webpack-plugin');module.exports = {     optimization: {       minimize: true,    minimizer: [	    new CssMinimizerPlugin(),//当压缩css之后，JS就不会自动压缩了	    new TerserPlugin()        ],  },};

安装 npm install terser-webpack-plugin --save-dev

加载图片

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。url-loader内置调用file-loader

file-loader: 将文件上的/file-loader解析为url，然后将文件发送到输出目录。import require()

安装 cnpm install -D file-loader url-loader

index.js

import img from '../public/1.jpg';

webpack.config.js

module.exports = {     module: {       rules: [      {           test: /\.(png|jpe?g|gif|ico)$/i,        use: [                   {               loader: 'url-loader',            options: {   	            name: '[path][name].[ext]',	            limit: 10*1024, //Byte limit to inline files as Data URL            },          },        ],      },    ],  },};