|
|
@@ -1,92 +1,102 @@
|
|
|
-const path = require('path');
|
|
|
-const merge = require('webpack-merge');
|
|
|
-const baseConfig = require('./webpack.base.js'); // 引用公共的配置
|
|
|
+const path = require("path");
|
|
|
+const merge = require("webpack-merge");
|
|
|
+const baseConfig = require("./webpack.base.js"); // 引用公共的配置
|
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`lib`目录中
|
|
|
-const webpack = require('webpack')
|
|
|
+const webpack = require("webpack");
|
|
|
|
|
|
const prodConfig = {
|
|
|
- mode: 'production', // 开发模式
|
|
|
- entry: path.join(__dirname, "../src/entry.jsx"),
|
|
|
- output: {
|
|
|
- path: path.join(__dirname, "../lib/"),
|
|
|
- filename: "index.js",
|
|
|
- libraryTarget: 'umd', // 采用通用模块定义
|
|
|
- libraryExport: 'default', // 兼容 ES6 的模块系统、CommonJS 和 AMD 模块规范
|
|
|
- },
|
|
|
- module: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- test: /\.css$/,
|
|
|
- loader: [MiniCssExtractPlugin.loader,'css-loader?modules'],
|
|
|
- },
|
|
|
- {
|
|
|
- test: /\.min\.css$/,
|
|
|
- loader: ['style-loader','css-loader'],
|
|
|
- },
|
|
|
- {
|
|
|
- test: /(\.module)?.(sass|scss)$/,
|
|
|
- use: [
|
|
|
- 'style-loader',
|
|
|
- {
|
|
|
- loader: 'css-loader',
|
|
|
- options: {
|
|
|
- modules: {
|
|
|
- localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
|
|
- },
|
|
|
- sourceMap: true,
|
|
|
- },
|
|
|
- },
|
|
|
- 'sass-loader',
|
|
|
- ],
|
|
|
+ mode: "production", // 开发模式
|
|
|
+ entry: path.join(__dirname, "../src/entry.jsx"),
|
|
|
+ output: {
|
|
|
+ path: path.join(__dirname, "../lib/"),
|
|
|
+ filename: "index.js",
|
|
|
+ libraryTarget: "umd", // 采用通用模块定义
|
|
|
+ libraryExport: "default", // 兼容 ES6 的模块系统、CommonJS 和 AMD 模块规范
|
|
|
+ },
|
|
|
+ module: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ test: /\.css$/,
|
|
|
+ loader: [MiniCssExtractPlugin.loader, "css-loader?modules"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.min\.css$/,
|
|
|
+ loader: ["style-loader", "css-loader"],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /(\.module)?.(sass|scss)$/,
|
|
|
+ use: [
|
|
|
+ "style-loader",
|
|
|
+ {
|
|
|
+ loader: "css-loader",
|
|
|
+ options: {
|
|
|
+ modules: {
|
|
|
+ localIdentName: "[path][name]__[local]--[hash:base64:5]",
|
|
|
+ },
|
|
|
+ sourceMap: true,
|
|
|
},
|
|
|
- // {
|
|
|
- // test: /\.less$/,
|
|
|
- // use: [
|
|
|
- // 'style-loader',
|
|
|
- // {
|
|
|
- // loader: 'css-loader',
|
|
|
- // options: {
|
|
|
- // modules: {
|
|
|
- // localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
|
|
- // },
|
|
|
- // sourceMap: true,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // 'less-loader',
|
|
|
- // ],
|
|
|
- // },
|
|
|
- {
|
|
|
- test: /\.less$/,
|
|
|
- loader: ['style-loader','css-loader','less-loader'],
|
|
|
+ },
|
|
|
+ "sass-loader",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // test: /\.less$/,
|
|
|
+ // use: [
|
|
|
+ // 'style-loader',
|
|
|
+ // {
|
|
|
+ // loader: 'css-loader',
|
|
|
+ // options: {
|
|
|
+ // modules: {
|
|
|
+ // localIdentName: '[path][name]__[local]--[hash:base64:5]',
|
|
|
+ // },
|
|
|
+ // sourceMap: true,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // 'less-loader',
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ test: /\.less$/,
|
|
|
+ use: [
|
|
|
+ "style-loader",
|
|
|
+ {
|
|
|
+ loader: "css-loader",
|
|
|
+ options: {
|
|
|
+ modules: true, // 确保启用了 CSS Modules
|
|
|
},
|
|
|
- {
|
|
|
- test: /\.(png|svg|jpg|gif)$/,
|
|
|
- use: ['file-loader'],
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- plugins: [
|
|
|
- new MiniCssExtractPlugin({
|
|
|
- filename: "main.min.css" // 提取后的css的文件名
|
|
|
- }),
|
|
|
- new webpack.ProvidePlugin({
|
|
|
- "React": "react",
|
|
|
- })
|
|
|
+ },
|
|
|
+ "less-loader",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.(png|svg|jpg|gif)$/,
|
|
|
+ use: ["file-loader"],
|
|
|
+ },
|
|
|
],
|
|
|
- externals: { // 定义外部依赖,避免把react和react-dom打包进去
|
|
|
- react: {
|
|
|
- root: "React",
|
|
|
- commonjs2: "react",
|
|
|
- commonjs: "react",
|
|
|
- amd: "react"
|
|
|
- },
|
|
|
- "react-dom": {
|
|
|
- root: "ReactDOM",
|
|
|
- commonjs2: "react-dom",
|
|
|
- commonjs: "react-dom",
|
|
|
- amd: "react-dom"
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ plugins: [
|
|
|
+ new MiniCssExtractPlugin({
|
|
|
+ filename: "main.min.css", // 提取后的css的文件名
|
|
|
+ }),
|
|
|
+ new webpack.ProvidePlugin({
|
|
|
+ React: "react",
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ externals: {
|
|
|
+ // 定义外部依赖,避免把react和react-dom打包进去
|
|
|
+ react: {
|
|
|
+ root: "React",
|
|
|
+ commonjs2: "react",
|
|
|
+ commonjs: "react",
|
|
|
+ amd: "react",
|
|
|
+ },
|
|
|
+ "react-dom": {
|
|
|
+ root: "ReactDOM",
|
|
|
+ commonjs2: "react-dom",
|
|
|
+ commonjs: "react-dom",
|
|
|
+ amd: "react-dom",
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
|
|
|
-module.exports = merge(prodConfig, baseConfig); // 将baseConfig和prodConfig合并为一个配置
|
|
|
+module.exports = merge(prodConfig, baseConfig); // 将baseConfig和prodConfig合并为一个配置
|