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 --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