webpack4.x深切与实践

一、什么是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 &＃8211;mode development或许webpack &＃8211;mode production，如许便会默许举行打包，进口文件是&＃8217;./src/index.js&＃8217;，输出途径是&＃8217;./dist/main.js&＃8217;，个中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）其他参数：

&＃8211;progerss：会涌现打包历程，有百分比进度条

&＃8211;display-modules：会把一切打包的模块列出来

&＃8211;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