mdcode/webpack.config.js at master · sisterAn/mdcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 抽离css
const HtmlWebpackPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // build前清理旧build文件

const entryConfig = ["popup", "modal", "setting"]

const getEntrys = () => {
  let entrys = []
  entryConfig.map(item => {
    entrys[item] = [path.resolve(__dirname, `./src/${item}.js`)]
  })
  return entrys
}

const htmlplugin = ()=> {
  let plugins = []
  entryConfig.map(item => {
    plugins.push(new HtmlWebpackPlugin({
      // favicon: "public/favicon.ico",
      filename: `${item}.html`,
      template: 'src/index.html',
      chunks: [item],
      //防止各site项目一样时，不生成html文件
      cache: false,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
      hash: true,
      templateParameters: {
        publicPath: `/`,
      },
    }))
  })
  return plugins
}

//编译代码的基础配置
module.exports = {
  mode: "production",
  entry: {
    ...getEntrys(),
  },
  output: {
    publicPath: "./",
    path: path.join(__dirname, `./dist/`),
    filename: "script/[name].js",
    chunkFilename: "script/[name].chunk.v1.js",
    globalObject: "this",
  },
  externals: {
  },
  //调试工具,开发环境开启eval-source-map,生产构建时不开启
  devtool: false,
  plugins: [
    ...htmlplugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "styles/[name].css",
      chunkFilename: "styles/[name].css",
    }),
  ],
  resolve: {
    //设置模块导入规则，import/require时会直接在这些目录找文件
    modules: [path.resolve("/src"), "node_modules"],
    //import导入时省略后缀
    extensions: [".ts", ".tsx", ".js", ".jsx", ".react.js", ".css", ".json"],
  },
  module: {
    //设置所以编译文件的loader
    rules: [
      {
        test: /\.css/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                modifyVars: {
                  'primary-color': 'sandybrown',
                  'link-color': 'rebeccapurple',
                  'border-radius-base': '2px',
                },
                javascriptEnabled: true
              }
            }
          }
        ],
      },
      {
        test: /\.[jt]sx?$/,
        use: ["babel-loader?cacheDirectory"],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "imgs/[name].[ext]",
              limit: 2048,
              publicPath: "/",
              fallback: "file-loader",
            },
          },
        ],
      },
    ],
  },
  performance: {
    //性能设置,文件打包过大时，不报错和警告，只做提示
    hints: false,
  },
};