开发模式
npx webpack serve --config ./config/webpack.dev.js
生产模式
npx webpack --config ./config/webpack.prod.js
配置完 package.json
运行开发模式:npm start
运行生产模式:npm run build
ps: npm publish 修改了文件名, 从 webpack 到 emily-webpack.
1. style-loader 会生成单独的 style 标签插入到 html 里
2. MiniCssExtractPlugin.loader, //提取 css 成单独的文件 https://webpack.docschina.org/plugins/mini-css-extract-plugin 可以解决闪屏问题
css 兼容性处理
url: https://webpack.docschina.org/loaders/postcss-loader#root
安装:npm install --save-dev postcss-loader postcss postcss-preset-env
postcss-loader 能解决大多数样式兼容问题,需要在 css-loader 下面,同时需要在 less-loader 前面。
在 paackage.json 里添加 browserslist 来做兼容性
"browserslist":[
"> 1%",
"last 2 versions",
"not dead"
]
css 压缩 https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/#root
step1 npm install css-minimizer-webpack-plugin --save-dev
step2 在 webpack.config.js 引入 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
step3 new MiniCssExtractPlugin()
step4 执行 npm run build
默认生产模式已经开启了 html 和 js 的压缩
emily-webpack
1.0.2 • Public • PublishedReadme
Keywords
nonePackage Sidebar
Install
npm i emily-webpack
Weekly Downloads
0
Version
1.0.2
License
ISC
Unpacked Size
141 kB
Total Files
28