开发环境
只是能让代码运行成功
运行项目指令:
-
webpack 会将打包结果输出
- 如果想指定输出路径 需要在module对应匹配配置中加
options: { outputPath: 'imgs'}
- 样式文件不会输出,是因为【css-loader】打包到js文件里了
- 如果想指定输出路径 需要在module对应匹配配置中加
-
npx webpack-dev-server 只会在内存中编译打包,没有输出
生产环境
问题一:
打包后,如果css在js中,会使js文件过大,先加载js才能通过创建style标签加入到页面中,会有闪屏的问题
解决:提取css成单独文件
- 需要下载插件mini-css-extract-plugin
- lodaer中的:MiniCssExtractPlugin.loader–>这个loader取代style-loader,提取js中的css成单独文件。
- plugin中的:MiniCssExtractPlugin --> 配置插件,其中的filename将输出的css文件重命名(默认是main.css)
- css兼容性处理:postcss
postcss-loader(loader), postcss-preset-env(插件)
帮postcss找到package.json中!!!browserslist里面的配置,通过配置加载指定的css兼容性样式
// ~!设置在最外层 // node 环境变量 : 决定使用browerlist哪个环境
process.env.NODE_ENV = 'development'
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, //1
'css-loader', //2
// 使用loader的默认配置 --> 'postcss-loader' //3
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('postcss-preset-env')()]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 将输出的css文件重命名(默认是main.css)
filename: 'css/built.css'
})
],
package.json加如下,了解就好
"browserslist": {
// 开发环境 --> 设置环境变量:process.env.NODE_ENV = 'development'
"development": [
"last 1 chrome version",
"last 1 firefox version"
],
// 生产环境:默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
问题二:
css文件太大,需要压缩
插件:css-minimizer-webpack-plugin
plugins: [
// 压缩css
new CssMinimizerWebpackPlugin()
],
扩展:压缩html和js
- js压缩: 生产环境下会自动js压缩:mode: ‘production’
- html压缩:HtmlWebpackPlugin插件增加minify(!!新版本只要改为生产环境,不用minify就可以压缩)
注意:
正常来讲,一个文件只能被一个loader处理,当一个文件要被多个loader处理,那么一定要指定loader执行的顺序 (先执行eslint, 在执行babel, 需要先格式化代码,再从es6转换为es5(这样浏览器才能识别) --> 在module 中加enforce: ‘pre’ 属性,可以优先执行)
# 压缩html
plugins: [
new HtmlWebpackPlugin(
// 复制'./src/index.html’文件, 并自动引入打包输出的所有资源(js/css)
{
template: './src/index.html'
minify:{
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
)
],