阅读量:3
css 处理
css提取
- 下载包
npm i -D mini-css-extract-plugin
- 配置
module: { rules: [ { test: /\.css$/, use: [ // 'style-loader', // 创建style标签，将样式加入js文件 MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件 'css-loader', ] }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ filename: 'css/budle.css' }) ], css兼容性处理
- 下载包
npm i -D postcss-loader postcss-preset-env
- 配置
Webpack.config.js
rules: [ { test: /\.css$/, use: [ // 'style-loader', // 创建style标签，将样式加入js文件 MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件 'css-loader', // css兼容性处理：postcss ---> postcss-loader postcss-preset-env // 帮postcss找到package.json中的browerslist里面的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * // 开发环境 --> 设置node环境变量： process.env.NODE_ENV = development 才能生效 "development": [ "last 1 chrome version", "last 2 firefox version", "last 1 safari version" ], // 生产环境:默认看生产环境 "production":[ "> 0.2%", "not dead", "not op_mini all" ] } */ { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ 'postcss-preset-env' ] }, } } ] }, ] package.json
"browserslist": { "development": [ "last 1 chrome version", "last 2 firefox version", "last 1 safari version" ], "production": [ "> 0.1%", "not dead", "not op_mini all" ] } 压缩css
- 下载包
npm i css-minimizer-webpack-plugin -D
plugins: [ // 压缩css new CssMinimizerWebpackPlugin() ], js压缩
- mode设置为生产模式即可，生产环境自动压缩js
mode: "production"
html压缩
plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true, } }), ] eslint
- 下载包
npm i -D eslint eslint-webpack-plugin eslint-plugin-import eslint-config-airbnb-base
- 配置
Webpack.config.js
plugins: [ new ESLintWebpackPlugin({ exclude: '/node_modules/', fix: true, }) ], Package.json
根配置，配置eslint标准
"eslintConfig": { "extends": "airbnb-base" } js兼容
- 下载包
npm i -D babel-loader @babel/preset-env @babel/core @babel/polyfill core-js
- 配置
module: { rules: [ { // 1. js兼容性处理： babel-loader @babel/core @babel/preset-env // 问题：babel只能转换基础的语法，如promise则不能进行转换 // 2. 全部兼容 @babel/polyfill // 问题：可以解决兼容性问题，但是引入了所有的兼容性代码，体积太大 // 3. 需要做兼容性的处理就ok，按需加载---> core-js test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 预设： 指示babel做怎样的兼容性处理 presets: [[ '@babel/preset-env', { useBuiltIns: 'usage', //按需加载 corejs: { version: 3, // 指定core-js版本 }, targets: { // 指定兼容浏览器版本 chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ]] } } ] } 在入口文件(src/index.js)引入@babel/polyfill
import '@babel/polyfill';
方案2和方案三选一种即可
方案2
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 预设： 指示babel做怎样的兼容性处理 presets: [[ '@babel/preset-env', ]] } } ] } 在入口文件引入 @babel/polyfill
import '@babel/polyfill';
方案3
module: { rules: [ { // 1. js兼容性处理： babel-loader @babel/core @babel/preset-env // 问题：babel只能转换基础的语法，如promise则不能进行转换 // 2. 全部兼容 @babel/polyfill // 问题：可以解决兼容性问题，但是引入了所有的兼容性代码，体积太大 // 3. 需要做兼容性的处理就ok，按需加载---> core-js test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 预设： 指示babel做怎样的兼容性处理 presets: [[ '@babel/preset-env', { useBuiltIns: 'usage', //按需加载 corejs: { version: 3, // 指定core-js版本 }, targets: { // 指定兼容浏览器版本 chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ]] } } ] } 