webpack學習筆記(二)

一、生產環境快速入門

生產環境作用:

能讓代碼優化上線運行的環境,要注意文件大小優化，兼容等方面

執行命令:

npx webpack

提取css成單獨文件

安裝包

# 指定版本,命令輸入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 mini-css-extract-plugin@1.6.0 css-loader@5.2.4 html-webpack-plugin@5.3.1

#逐個依次安裝
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0  
npm i -D css-loader@5.2.4 
npm i -D html-webpack-plugin@5.3.1
#新增
npm i -D mini-css-extract-plugin@1.6.0

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//導入包
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 這個loader取代style-loader。作用：提取js中的css成單獨文件
          MiniCssExtractPlugin.loader,
          // 將css文件整合到js文件中
          'css-loader'
        ]
      }                    
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 對輸出的css文件進行重命名
      filename: 'css/bundle.css'
    })
  ]
};

css兼容性處理

安裝包

# 新增
npm i -D postcss-loader@5.2.0 postcss-preset-env@6.7.0

#逐個依次安裝
npm i -D postcss-loader@5.2.0
npm i -D postcss-preset-env@6.7.0

配置

//webpack.config.js中
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 設置nodejs環境變量,默認是production
process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')()]
              }
            }
          }
            
        ]
      }      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/build.css'
    })
  ]
};

// 在package.json中添加browserslist鍵值實現配置，通過配置加載指定的css兼容性樣式
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

說明

如果出現錯誤，到https://www.npmjs.com/上查看用法更新

壓縮css

安裝包

# 新增
npm i -D optimize-css-assets-webpack-plugin@5.0.4

說明：

The optimize-css-assets-webpack-plugin@4.0.0 version and above supports webpack v4.

根據上面信息，對webpack v4支持，沒提到對webpack v5支持。

//會出現下面信息，經測試不影響壓縮
(node:12932) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)

關注網址：https://www.npmjs.com/package/optimize-css-assets-webpack-plugin 看支持最新信息

配置

//接css兼容性處理的配置，進行添加
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//導入包
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('postcss-preset-env')()]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/build.css'
    }),
     // 壓縮css
    new OptimizeCssAssetsWebpackPlugin()
  ]
};

js語法檢查

舊版

安裝包

npm i -D webpack@5.36.2 webpack-cli@4.7.0 html-webpack-plugin@5.3.1
npm i eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自動修復eslint的錯誤
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

// 在package.json中添加eslintConfig中設置
"eslintConfig": {
  "extends": "airbnb-base"
}

說明

• 在js中下一行不進行eslint檢查,在js中添加 // eslint-disable-next-line 則 console.log("aaa");這一行不檢查。

  //在./src/js/index.js中
  // eslint-disable-next-line
  console.log("aaa");
  

使用eslint-webpack-plugin替換舊版eslint-loader

安裝包:

# 指定版本,命令輸入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 html-webpack-plugin@5.3.1 eslint@7.26.0 eslint-config-airbnb-base@14.2.1 eslint-plugin-import@2.22.1 eslint-webpack-plugin@2.5.4

# 逐個依次安裝
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0 
npm i -D html-webpack-plugin@5.3.1 
# 新增
npm i -D eslint@7.26.0 
npm i -D eslint-config-airbnb-base@14.2.1 
npm i -D eslint-plugin-import@2.22.1 
npm i -D eslint-webpack-plugin@2.5.4

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [

    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'coffee'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'development'
};

// 在package.json中添加eslintConfig中設置
"eslintConfig": {
  "extends": "airbnb-base"
}

說明:

在js中哪一行不進行eslint檢查, 在在上面想添加 // eslint-disable-next-line

js兼容性處理

安裝包

# 指定版本,命令輸入在一行
npm i -D babel-loader@8.2.2 @babel/core@7.14.0 @babel/preset-env@7.14.1 core-js@3.12.1

# 逐個依次安裝
#新增
npm i -D babel-loader@8.2.2 
npm i -D @babel/core@7.14.0 
npm i -D @babel/preset-env@7.14.1 
npm i -D core-js@3.12.1

配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 預設：指示babel做怎么樣的兼容性處理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加載
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪個版本瀏覽器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

// 在package.json中添加browserslist鍵值實現配置，通過配置加載指定的js兼容性樣式,同css兼容性處理可以一樣
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

js壓縮

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 生產環境下會自動壓縮js代碼
  mode: 'production'
};

html壓縮

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 壓縮html代碼
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注釋
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

二、生產環境配置（綜合配置）

初始化

# 初始化項目
npm init -y

# 指定版本,命令輸入在一行
npm i -D webpack@5.36.2 webpack-cli@4.7.0 style-loader@2.0.0 css-loader@5.2.4 less@4.1.1 less-loader@8.1.1 html-webpack-plugin@5.3.1 html-loader@2.1.2 file-loader@6.2.0 url-loader@4.1.1 mini-css-extract-plugin@1.6.0 postcss-loader@5.2.0 postcss-preset-env@6.7.0 optimize-css-assets-webpack-plugin@5.0.4 eslint@7.26.0  eslint-config-airbnb-base@14.2.1  eslint-plugin-import@2.22.1  eslint-webpack-plugin@2.5.4 babel-loader@8.2.2  @babel/core@7.14.0  @babel/preset-env@7.14.1  core-js@3.12.1

#逐個依次安裝
npm i -D webpack@5.36.2 
npm i -D webpack-cli@4.7.0 
npm i -D style-loader@2.0.0 
npm i -D css-loader@5.2.4
npm i -D less@4.1.1
npm i -D less-loader@8.1.1
npm i -D html-webpack-plugin@5.3.1
npm i -D html-loader@2.1.2
npm i -D file-loader@6.2.0
npm i -D url-loader@4.1.1
npm i -D mini-css-extract-plugin@1.6.0
npm i -D postcss-loader@5.2.0
npm i -D postcss-preset-env@6.7.0
npm i -D optimize-css-assets-webpack-plugin@5.0.4
npm i -D eslint@7.26.0 
npm i -D eslint-config-airbnb-base@14.2.1 
npm i -D eslint-plugin-import@2.22.1 
npm i -D eslint-webpack-plugin@2.5.4
npm i -D babel-loader@8.2.2 
npm i -D @babel/core@7.14.0 
npm i -D @babel/preset-env@7.14.1 
npm i -D core-js@3.12.1

配置

//webpack.config.js中
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

// 定義nodejs環境變量：決定使用browserslist的哪個環境
process.env.NODE_ENV = 'production';

// 復用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: { postcssOptions: { plugins: [require('postcss-preset-env')()] } }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: { chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false,
        }
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: { outputPath: 'media' }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
 	new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'coffee'],
      exclude: '/node_modules/'
    })
  ],
  mode: 'production'
};

// 在package.json中添加browserslist和eslintConfig配置
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
"eslintConfig": {
  "extends": "airbnb-base"
}

說明

• 入口路徑: './src/js/index.js'

• js輸出路徑: './dist/js/bundle.js'

• 輸出目錄: path: resolve(__dirname, 'dist')

• index.html模板入口路徑： './src/index.html'

• index.html模板輸出路徑：'./dist/index.html'

• 處理圖片資源配置中出現的outputPath: 'imgs'為設置圖片輸出目錄，在'./dist/imgs/'目錄里

• 處理其他資源配置中出現的outputPath: 'media'為設置其他資源輸出目錄，在'./dist/media/'目錄里

• 目錄划分

  • ./scr/js 存放js文件
  • ./src/imgs 存放圖片
  • ./src/css 存放css
  • ./src/media 存放其他資源，比如字體

• 執行命令：npx webpack

舊版

初始化

最新版本安裝（可能出現兼容性問題）

npm init -y

//package.json中devDependencies里添加下面部分
	"@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "babel-loader": "^8.2.2",
    "core-js": "^3.12.0",
    "css-loader": "^5.2.4",
    "eslint": "^7.26.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.7.0"

npm install .

配置

//webpack.config.js中
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定義nodejs環境變量：決定使用browserslist的哪個環境
process.env.NODE_ENV = 'production';

// 復用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: { postcssOptions: { plugins: [require('postcss-preset-env')()] } }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      //當一個文件要被多個loader處理，那么一定要指定loader執行的先后順序： 
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',		// 優先執行設置
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: { chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false,
        }
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: { outputPath: 'media' }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/bundle.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

// 在package.json中添加browserslist和eslintConfig配置
 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
"eslintConfig": {
  "extends": "airbnb-base"
}