webpack5开发环境和生产环境配置

开发环境配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'development';
module.exports = {
  target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist',
  entry: ['./src/js/index.js', './src/index.html'],
  output: {
    filename: 'js/index.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.(sass|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(jpg|jpeg|png|gif)$/,
        loader: 'url-loader',
        options: {
          esModule: false,
          outputPath: 'image',
          limit: 10 * 1024,
          name: '[hash:8][name].[ext]',
        },
      },
      {
        test: /\.html$/,
        loader: 'html-withimg-loader',
      },
      {
        exclude: /\.(html|js|css|less|sass|scss|jpg|jpeg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media',
          name: '[hash:10].[ext]',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    open: true,
    port: 3000,
    hot: true,
  },
  devtool: 'cheap-module-source-map',
};

生产环境配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: ['postcss-preset-env'],
      },
    },
  },
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/index.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              fixe: true,
            },
          },
        ],
      },
      {
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader],
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader'],
          },
          {
            test: /\.(sass|scss)$/,
            use: [...commonCssLoader, 'sass-loader'],
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      ie: 10,
                      edge: 17,
                      firefox: 60,
                      chrome: 60,
                      safari: 10,
                    },
                    useBuiltIns: 'usage',
                    corejs: 3,
                  },
                ],
              ],
            },
          },
          {
            test: /\.(jpg|jpeg|png|gif)$/,
            loader: 'url-loader',
            options: {
              esModule: false,
              outputPath: 'image',
              limit: 10 * 1024,
              name: '[hash:8].[ext]',
            },
          },
          {
            test: /\.html$/,
            loader: 'html-withimg-loader',
          },
          {
            exclude: /\.(html|js|css|less|sass|scss|jpg|jpeg|png|gif)$/,
            loader: 'file-loader',
            options: {
              outputPath: 'media',
              name: '[hash:10].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.css',
    }),
    new CssMinimizerWebpackPlugin(),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  externals: {
    jquery: 'jQuery',
  },
  mode: 'production',
};

package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "npx webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.5",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.1",
    "eslint": "^7.29.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.1",
    "html-withimg-loader": "^0.1.16",
    "less": "^4.1.1",
    "less-loader": "^9.1.0",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "postcss": "^8.3.5",
    "postcss-loader": "^6.1.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^2.0.0",
    "thread-loader": "^3.0.4",
    "url-loader": "^4.1.1",
    "webpack": "^5.39.0",
    "webpack-cli": "^4.7.2",
    "workbox-webpack-plugin": "^6.1.5"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "core-js": "^3.15.0",
    "jquery": "^3.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": {
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ],
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ]
  },
  "sideEffects": [
    "*.css",
    "*.less",
    "*.scss"
  ]
}

小结

编辑不易，转载请注明出处。感谢赏阅，期待你的建议，点赞和关注。