webpack学习笔记

webpack学习

 

在安装一个要打包到生产环境的安装包时，你应该使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev

 

开发环境：项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成： 操作系统 ，web服务器 ，语言环境。  php 。 数据库 。 等等

测试环境：项目完成测试，修改bug阶段

生产环境：项目数据前端后台已经跑通，部署在阿里云上之后，有客户使用，访问，就是网站正式运行了

 

npx webpack --config webpack.config.js//使用--config可以传递审核名称的配置文件，这个对于需要拆分成多个文件的复杂配置是非常有用的。

 

 npm run build 命令，来替代我们之前使用的 npx 命令【npx webpack】

webpack中加载css

npm install --save-dev style-loader css-loader

webpack中加载图片

npm install --save-dev file-loader

 

webpack中加载数据

npm install --save-dev csv-loader xml-loader,主要提供加载CSV、TSV、XML格式的文件

 

HtmlWebpackPlugin

作用：如果更改了入口起点的名称，但是我们index.html中引入的起点名称没有变化，此时就不会重新渲染，使用了HtmlWebpackPlugin，构建之后会生成一个新的index.html来替换原来的index.html，所有的buddle都会自动添加到新的index.html中。

npm install --save-dev html-webpack-plugin

清理dist文件夹

npm install --save-dev clean-webpack-plugin

通过使用WebpackMainfestPlugin可以将数据提取到一个json文件中，通过缓存只能可以弄清楚如何与长期缓存相关联