使用webpack入门
1、Sass和less(css的预处理器)
less需要npm下载less包和less-loader
Sass需要npm下载node-sass包和sass-loader
2、 处理css兼容性
postcss会找到package.json中的browserslist里面的配置,通过加载css的兼容性
npm i postcss-loader postcss-preset-env -D
3、 压缩css
optimize-css-assets-webpack-plugin插件压缩css内容
- 引入插件
const OptimizeCssAssetWebpackPlugin = require("optimize-css-asset-webpack-plugin")
- 使用插件
plugins:[ new OptimizeCssAssetWebpackPlugin()]
4、打包图片资源
- 下载url-loader 和file-loader
npm i url-loader file-loader -D
- 在css中引入图片
- 在html中使用图片下载html-withimg-loader
5、对JS语法配置语法检查eslint
- 下载eslint-loader,使用规则库下载包:
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
- 注意配置文件webpack.config.js编写,不用检查第三方库(npmjs.com)
//eslint只检查js文件
test:/\.js$/,
//不用检查三方库代码
exclude:/node_modules/,
loader:'eslint-loader',
options:{
fix:true
}
6、配置开发服务器devServer
- 下载包
npm i webpack-dev-server -D
- webpack5 启动服务命令
npx webpack serve
- 改变端口
webpack serve --port 3000
- 自动保存运行设置配置文件
target:"web"