webpack优化

webpack.config 按照production和dev分开配置， wepback.base.config.js

npm install webpack-merge -D

代码语言：javascript复制

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: {
  index: "./src/index.js",
},
output: {
  path: path.resolve(__dirname, "./dist"),
  filename: "[name]-[hash:6].js",
},
module: {
  rules: [
    {
      test: /.(png|jpe?g|gif)$/,
      use: {
        loader: "url-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images",
          limit: 1024 * 3, //3kb
        },
      },
    },
    {
      test: /.(eot|woff|woff2)$/,
      use: "file-loader",
    },
    {
      test: /.js$/,
      use: {
        loader: "babel-loader",
      },
    },
  ],
},

plugins: [new CleanWebpackPlugin()],
};

webpack.dev.config.js

代码语言：javascript复制

//webpack内置插件
const { HotModuleReplacementPlugin } = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");

const devConfig = {
  mode: "development",
  module: {
    rules: [
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
    ],
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    open: true,
    hot: true,
    hotOnly: true,
    port: 8081,
    proxy: {
      "/api": {
        target: "http://localhost:9092",
      },
    },
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
    new HotModuleReplacementPlugin(),
  ],
};
// module.exports = (env) => {
//   //
//   if(porcess.env.NODE_ENV==='env'){
//     return merge(baseConfig,devConfig)
//   }else{
//     return merge(baseConfig,prodConfig)
//   }
// };
module.exports = merge(baseConfig, devConfig);

webpack.prod.config.js

代码语言：javascript复制

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config.js");

const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");

const prodConfig = {
  mode: "production",
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
    ],
  },
  optimization: {
    usedExports: true,
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      minify: {
        // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true, // 压缩内联css
      },
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name]-[contenthash:6].css",
    }),
    new OptimizeCSSAssetsPlugin({
      cssProcessor: require("cssnano"), // 这里制定了引擎，不指定默认也是 cssnano
    }),
    new PurifyCSS({
      paths: glob.sync([
        // 要做 CSS Tree Shaking 的路径文件
        path.resolve(__dirname, "./src/*.html"), // 请注意，我们同样需要对 html 文件进行 tree shaking
        path.resolve(__dirname, "./src/*.js"),
      ]),
    }),
  ],
};

module.exports = merge(baseConfig, prodConfig);

附加配置文件 postcss.config.js

代码语言：javascript复制

module.exports = {
  plugins: [
    require("autoprefixer")({
      overrideBrowserslist: ["last 2 versions", ">1%"],
    }),
    // require("cssnano"),
  ],
};

webpack javascript 打包

0 人点赞