webpack使用安装包

使用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"