如何使用 webpack
4.用 webpack 生成 HTML
- 做项目的时候最好是git提交一下，因为有可能做着做着做毁了，没办法撤回
- 官网链接：HTMLWebpack
- 安装：
yarn add html-webpack-plugin --dev - 复制代码到之前的webpack.config.js文件中
删掉重复的命令，也就多了两句话
声明放前面，plugins放在module里面即可
const HtmlWebpackPlugin = require('html-webpack-plugin');
{
plugins: [new HtmlWebpackPlugin()],
}
- 再次运行：
yarn build
自动生成了一个空的HTML文件，里面还自动引入了main.js
修改package里面的filename，重新运行后HTML文件里的script内容也会跟着改 - 自动修改文件名
当修改JS中内容后，index.js会重新生成文件名，对应的HTML文件中引入的文件名也会改 - 注意：dist里面所有内容都是生成的，下次打包就不见了，因此不能在里面修改添加内容
4.1 如何往HTML文件中添加内容
- 插件文档
- 按照文档提示，将唯一不同的地方放进去
（plugins插件，记得加花括号）
title：可以修改生成HTML文档的名字
filename：上面已经有了输出路径，可以删掉 - 添加HTML模板
template: 'src/assets/index.html'
根据路径在src中新建目录assets，然后index.html是我们自己写的HTML文件，webpack会作为生成模板，生成到dist文件中 - 想要保留配置文件中修改的title，则在模板的title处添加
<%= htmlWebpackPlugin.options.title %>
- 复制淘宝的viewport
注意：修改的东西全部放到模板HTML中，不要放错了
5.用 webpack 引入 CSS
- 可以使用JS生成style
- 也可以把CSS抽成文件
- 使用场景
1.在开发的时候使用模式一
2.在build生成的时候用模式二
5.1 配置
- 官方文档
- 运行：
yarn add css-loader --dev - 运行之后就可以用import引入CSS文件
- 复制代码进入配置文件
1.test：如果你的文件名是 .css结尾
2.use：就使用 style-loader和css-loader
3.style-loader：安装yarn add style-loader --dev
4.再次yarn build就成功了 - style-loader和css-loader
1.css-loader：会把CSS文件内容读到JS里面
2.style-loader：把css-loader读到的东西变成style标签放到head中
5.2 如何预览CSS
- 在x.js中引入CSS：
import './x.css' cd dist–http-server . -c-1
- 注意：修改文件之后要重新build
不能在dist目录build，必须要回上一层目录
cd ..
5.3 使用JS生成style
- 用来代替 http-server
就不用每次修改都重新打包了 - 官方文档
- 安装：
yarn add webpack-dev-server --dev - 添加配置
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
- 在package.json中添加
"start": "webpack serve --open",
open：是否帮你打开浏览器，如果不想就删掉 - 运行：
yarn start
1.修改代码后，不需要重新build
2.不需要在server，保存就刷新 - 注意：它不会重新生成dist目录，只是在内存中搞定
5.4 把CSS抽成文件
- 不想生成style标签，想要变成文件
- 官方文档
- 安装：
yarn add mini-css-extract-plugin --dev - 配置
这里style和CSS需要二选一，要文件就不要style标签
- CSS文件后面没有一串数字，无法做缓存
上面的filename改成：[name].[contenthash].css
5.5 模式切换
- 生成环境：yarn build
上线代码 - 开发环境：yarn start
- 创建两个confige文件
1.默认的文件用来开发：使用style-loader（因为快不需要生成文件）
2.生成文件用webpack.config.prod.js：使用生成CSS文件的（因为需要做缓存） - 如何选择两个文件
1.在package.json中修改
"build": "rm -rf dist && webpack --config webpack.config.prod.js",
在build的时候不使用默认配置，而是新写的配置
2.在webpack.config.prod.js中修改
上面的mode改为：production
5.6 继承的思想
- 两个confige文件只有一行不一样，使用继承的思想
- 创建：webpack.config.base.js文件
复制两个confige的共有属性 - 抄属性：
...base, - 生成环境config.prod
只有三处不同
1.mode
2.多一个提取CSS的插件
3.CSS的use：没有style - 开发环境
大部分都是继承
1.dev开头的两个属性
2.use有不同，含有style-loader - base文件
1.入口
2.输出
3.HTML插件 - 运行命令
1.yarn start：开发环境，style标签
2.yarn build：生成环境，link标签
转载：https://blog.csdn.net/qq_40282016/article/details/116723586
查看评论