Basic configurations commonly used in configuration projects:

Module. rules Configuration list

  • css
  • less
  • Postcss: CSS compatibility
  • Eslint: syntax checking
  • Babel: JS compatibility processing
  • The picture
  • HTML images
  • Other file types

Module. plugins configuration list

  • HtmlWebPackPlugin: Generates HTML templates
  • MiniCssExtractPlugin: Extract CSS files separately
  • CSS OptimizeCssAssetsWebpackPlugin: compression

Project directory

Webpack.config.js code example

const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebPackPlugin = require('html-webpack-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // Define the nodejs environment and decide which environment to use browserslist process.env.node_env = 'production'; / / reuse loader const commonCssLoader = [{loader: MiniCssExtractPlugin loader, the options: {publicPath: '../'}}, 'csS-loader ', {// Also need to define browserslist object in package.json for compatibility browser loader:' postCSs-loader ', options:{ident: 'postcss', plugins: () => { require('postcss-preset-env')() } } } ] module.exports = { entry: './src/js/index.js', output:{ filename: 'js/built.js', path: resolve(__dirname, 'dist') }, module:{ rules: [ { test: /\.css$/, use: [...commonCssLoader] }, { test:/\.less$/, use: [...commonCssLoader, // less converted to CSS to be compatible with postCSS 'less-loader']}, /* If a file is to be processed by multiple loaders, you must specify the order in which loader will execute eslint first before executing Babel */ {// eslint configuration // In package.json eslintConfig --> Airbnb test: /\.js$/, exclude: /node_modules/, // Enforce: 'pre', loader: 'eslint-loader', options: {fix: true}}, {// js compatibility test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 3}, the targets: {chrome: '60, firefox:' 60, ie: '9', safari: '10', the edge: '17'}}}}]], / / picture {test: / \. (JPG | PNG | GIF) /, loader: 'url - loader' options: {/ / picture size is less than 8 KB, will be base64 processing limit: 8 * 1024, / / rename / / to the picture [10] hash: take pictures of the hash top 10 / / (ext) take the original file extensions (such as JPG | PNG) name: '[hash:10].[ext]', // outputPath: 'imgs', esModule: false}}, {test: /\.html$/, loader: 'HTML - loader'}, / / out to deal with file types, and other types of output file intact {exclude: / \. (js | | CSS less | | HTML JPG | PNG | GIF) /, loader: 'file-loader', options:{ outputPath: 'media' } } ] }, plugins: [ new HtmlWebPackPlugin({ template: '. / SRC/index. HTML ', / / compression HTML minify: {collapseInlineTagWhitespace: true, removeComments: true } }), new MiniCssExtractPlugin({ filename: 'css/built.css' }), new OptimizeCssAssetsWebpackPlugin() ], mode: 'production' // automatic js compression in production environment}Copy the code

The demo address

Reference video: B station is still silicon Valley