一、什么是webpack
是一个前端资本加载/打包东西。它将依据模块的依靠关联举行静态剖析，然后将这些模块根据指定的划定规矩天生对应的静态资本。它做的事变是，剖析你的项目构造，找到JavaScript模块以及别的的一些浏览器不能直接运转的拓展言语（Scss，TypeScript等），并将其转换和打包为适宜的花样供浏览器运用。能够将多种静态资本 js、css、less 转换成一个静态文件，减少了页面的要求。
二、装置和命令行
1、新建一个目次，进入目次，初始化
2、装置
全局装置
在输出版本时，显现，要装置webpack-cli
如许就可以输出版本，能够看到我装置的是4.2.0，这里要注重，自webpack4以后，运用有很大的变化
部分装置
（1）演习（坑）：处置惩罚js文件，在项目根目次下，新建hello.js，然后打包
显现没有设置webpack的mode选项，默许有production和development两种，我们输入
依旧有错：未找到进口模块发成毛病，
这是由于webpack4.x是以项目根目次下的./src/index.js作为进口，所以我们要新建src目次且改hello.js为index.js
这里还要注重：
webpack4.x的打包已不能用webpack 文件a 文件b的体式格局，而是直接运转webpack –mode development或许webpack –mode production，如许便会默许举行打包，进口文件是’./src/index.js’，输出途径是’./dist/main.js’，个中src目次即index.js文件须要手动建立，而dist目次及main.js会自动天生。
因而我们不再按webpack 文件a 文件b的体式格局运转webpack指令，而是直接运转
如许便能完成打包。
每次如许写是否是都点贫苦，我们能够在package.json中
每次实行就可以够：
（2）演习：处置惩罚css文件
新建一个css文件style.css，在index.js中引入
然后打包：
会报如上毛病，是由于webpack不支持css文件范例，须要依靠loader
css-loader：使webpack能够处置惩罚css文件
style-loader：新建一个style标签，把css-loader处置惩罚过的文件放进去，然后插进去到HTML标签中
装置以后运用（直接在文件前）：
或许（在命令行）：
那每次更新都要实行一次，有无自动更新的？？？
（3）其他参数：
–progerss：会涌现打包历程，有百分比进度条
–display-modules：会把一切打包的模块列出来
–display-reasons：会把打包的缘由列出来
三、webpack的设置
（1）新建一个项目并初始化
上面：将会打包。。。main.js文件到。。。bundle.js文件
多文件输入：
四、自动天生HTML页面文件
（1）装置html-webpack-plugin插件
（2）在webpack设置package.config.js中
（3）传参运用
1、参数
在根目次下的index.html中
天生的dist/index.html中
2、上线地点
在天生的index.html中
3、html紧缩
4、多页面运用，天生多个html文件
五、loader的设置
1、剖析es6语法
（1）装置babel
（2）设置webpack
2、剖析css
（1）装置style-loader和css-loader
（2）设置webpack
（3）在项目中经常有相似-webkit的前缀，每次写很贫苦，这里就要用到postcss-loader,后处置惩罚loader
设置webpack
新建一个postcss.config.js文件和webpack.config.js同级
此时，假如你打包，并不会报错，然则前缀能够也没有，所以须要在package.json中到场
3、剖析less
（1）装置
（2）webpack的设置
4、剖析sass
sass的运用和less一样，只要把less改成sass就好了
5、处置惩罚html模板文件
（1）装置html-loader
（2）设置
（3）运用
layer.js
app.js
6、运用ejs模板文件，后缀为tpl或ejs
（1）装置
（2）设置
（3）运用
layer.tpl
layer.js
app.js
7、用file-loader处置惩罚图片
（1）装置
（2）设置
（3）运用
layer.less
如果在.tpl或.ejs中运用
（4）也能够加参数
8、运用url-loader处置惩罚图片（会影响文件大小）
9、经由过程image-webpack-loader和url-loader连系：先有image-webpack-loader打包，在经由过程url-loader
