basis

// Webpack base configuration object
const HtmlWebpackPlugin = require('Html-webpack-plugin'); // Generate an HTML template
module.export = {
    entry:'./src/main.js'.output: {filename:'build.js'
        path:path.resolve(_dirname,'dist')},module: {rules:[
            {
                test:'.css$'.use: ['style-loader'.'css-loader']]}},plugins: [new HtmlWebpackPlugin({
           template:'./index.html'}})]Copy the code

Commonly used loader

  1. Css-loader, style-loader // Process CSS
  2. MiniCssExtractPlugin. Loader / / CSS out of a separate file
  3. Url-loader // parse image resources:
  4. File-loader // Parse other file resources:
  5. Html-withimg-loader // Parse images in HTML:
  6. Postcss-loader // Handle CSS compatibility, usage and corresponding plug-ins to see webpack official website
  7. Babel-loader // handles JS compatibility and can only handle simple compatibility, not advanced syntax like Promise

The plugin is commonly used

const HtmlWebpackPlugin = require('Html-webpack-plugin'); // Generate an HTML template
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  / / CSS to pull away
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');  / / compress CSS
Copy the code