webpack4.x深刻与实践

1、什么是webpack

是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。能够将多种静态资源 js、css、less 转换成一个静态文件，减小了页面的请求。

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：会把打包的缘由列出来

3、webpack的配置

（1）新建一个项目并初始化

上面：将会打包。。。main.js文件到。。。bundle.js文件

多文件输入：

4、自动生成HTML页面文件

（1）安装html-webpack-plugin插件

（2）在webpack配置package.config.js中

（3）传参使用

一、参数

在根目录下的index.html中

生成的dist/index.html中

二、上线地址

在生成的index.html中

三、html压缩

四、多页面应用，生成多个html文件

5、loader的配置

一、解析es6语法

（1）安装babel

（2）配置webpack

二、解析css

（1）安装style-loader和css-loader

（2）配置webpack

（3）在项目中常常有相似-webkit的前缀，每次写很麻烦，这里就要用到postcss-loader,后处理loader

配置webpack

新建一个postcss.config.js文件和webpack.config.js同级

此时，若是你打包，并不会报错，可是前缀可能也没有，因此须要在package.json中加入

三、解析less

（1）安装

（2）webpack的配置

四、解析sass
sass的使用和less同样，只要把less改成sass就好了

五、处理html模板文件

（1）安装html-loader

（2）配置

（3）使用

layer.js

app.js

六、使用ejs模板文件，后缀为tpl或ejs

（1）安装

（2）配置

（3）使用

layer.tpl

layer.js

app.js

七、用file-loader处理图片

（1）安装

（2）配置

（3）使用

layer.less

如果在.tpl或.ejs中使用

（4）也能够加参数

八、使用url-loader处理图片（会影响文件大小）

九、经过image-webpack-loader和url-loader结合：先有image-webpack-loader打包，在经过url-loader