yimi-builder-webpack 1.0.0

package/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  parser: 'babel-eslint',
+  extends: 'airbnb-base',
+  env: {
+    browser: true,
+    node: true
+  }
+}

package/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx'
+  ]
+}

package/lib/webpack.base.js

@@ -0,0 +1,138 @@
+const glob = require('glob');
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const autoprefixer = require('autoprefixer');
+
+const projectRoot = process.cwd();
+
+const setMPA = () => {
+  const entry = {};
+  const htmlWebpackPlugins = [];
+  const entryFiles = glob.sync(path.join(projectRoot, './src/*/index.js'));
+  Object.keys(entryFiles)
+    .map((index) => {
+      const entryFile = entryFiles[index];
+      // '/Users/cpselvis/my-project/src/index/index.js'
+
+      const match = entryFile.match(/src\/(.*)\/index\.js/);
+      const pageName = match && match[1];
+
+      entry[pageName] = entryFile;
+      return htmlWebpackPlugins.push(
+        new HtmlWebpackPlugin({
+          inlineSource: '.css$',
+          template: path.join(projectRoot, `./src/${pageName}/index.html`),
+          filename: `${pageName}.html`,
+          chunks: ['vendors', pageName],
+          inject: true,
+          minify: {
+            html5: true,
+            collapseWhitespace: true,
+            preserveLineBreaks: false,
+            minifyCSS: true,
+            minifyJS: true,
+            removeComments: false,
+          },
+        }),
+      );
+    });
+
+  return {
+    entry,
+    htmlWebpackPlugins,
+  };
+};
+
+const { entry, htmlWebpackPlugins } = setMPA();
+
+module.exports = {
+  entry,
+  output: {
+    path: path.join(projectRoot, 'dist'),
+    filename: '[name]_[chunkhash:8].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+      },
+      {
+        test: /.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
+      },
+      {
+        test: /.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'less-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                autoprefixer({
+                  browsers: ['last 2 version', '> 1%', 'ios 7'],
+                }),
+              ],
+            },
+          },
+          {
+            loader: 'px2rem-loader',
+            options: {
+              remUnit: 75,
+              remPrecision: 8,
+            },
+          },
+        ],
+      },
+      {
+        test: /.(png|jpg|gif|jpeg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name]_[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+      {
+        test: /.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name]_[hash:8][ext]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name]_[contenthash:8].css',
+    }),
+    new CleanWebpackPlugin(),
+    new FriendlyErrorsWebpackPlugin(),
+    function errorPlugin() {
+      this.hooks.done.tap('done', (stats) => {
+        if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') === -1) {
+          process.exit(1);
+        }
+      });
+    },
+  ].concat(htmlWebpackPlugins),
+  stats: 'errors-only',
+};

package/lib/webpack.dev.js

@@ -0,0 +1,18 @@
+const merge = require('webpack-merge');
+const webpack = require('webpack');
+const baseConfig = require('./webpack.base');
+
+const devConfig = {
+  mode: 'production',
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+    stats: 'errors-only',
+  },
+  devtool: 'cheap-source-map',
+};
+
+module.exports = merge(baseConfig, devConfig);

package/lib/webpack.prod.js

@@ -0,0 +1,45 @@
+const { merge } = require('webpack-merge');
+// const cssnano = require('cssnano');
+// const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
+// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const prodConfig = {
+  mode: 'production',
+  plugins: [
+    new CssMinimizerWebpackPlugin(),
+    // new OptimizeCSSAssetsPlugin({
+    //   assetNameRegExp: /\.css$/g,
+    //   cssProcessor: cssnano,
+    // }),
+    // new HtmlWebpackExternalsPlugin({
+    //   externals: [
+    //     {
+    //       module: 'react',
+    //       entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
+    //       global: 'React',
+    //     },
+    //     {
+    //       module: 'react-dom',
+    //       entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
+    //       global: 'ReactDOM',
+    //     },
+    //   ],
+    // }),
+  ],
+  optimization: {
+    splitChunks: {
+      minSize: 0,
+      cacheGroups: {
+        commons: {
+          name: 'vendors',
+          chunks: 'all',
+          minChunks: 2,
+        },
+      },
+    },
+  },
+};
+
+module.exports = merge(baseConfig, prodConfig);

package/lib/webpack.ssr.js

@@ -0,0 +1,57 @@
+const { merge } = require('webpack-merge');
+// const cssnano = require('cssnano');
+// const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
+// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const prodConfig = {
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: 'ignore-loader',
+      },
+      {
+        test: /\.less$/,
+        use: 'ignore-loader',
+      },
+    ],
+  },
+  plugins: [
+    new CssMinimizerWebpackPlugin(),
+    // new OptimizeCSSAssetsPlugin({
+    //   assetNameRegExp: /\.css$/g,
+    //   cssProcessor: cssnano,
+    // }),
+    // new HtmlWebpackExternalsPlugin({
+    //   externals: [
+    //     {
+    //       module: 'react',
+    //       entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
+    //       global: 'React',
+    //     },
+    //     {
+    //       module: 'react-dom',
+    //       entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
+    //       global: 'ReactDOM',
+    //     },
+    //   ],
+    // })
+  ],
+  optimization: {
+    splitChunks: {
+      minSize: 0,
+      cacheGroups: {
+        commons: {
+          name: 'commons',
+          chunks: 'all',
+          minChunks: 2,
+        },
+      },
+    },
+  },
+};
+
+module.exports = merge(baseConfig, prodConfig);

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "yimi-builder-webpack",
+  "version": "1.0.0",
+  "description": "webpack项目配置集成",
+  "private": false,
+  "main": "index.js",
+  "scripts": {
+    "test": "mocha",
+    "test2": "nyc npm run test",
+    "eslint": "eslint ./lib --fix"
+  },
+  "keywords": [],
+  "author": "wangguoliang123",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.32.0",
+    "glob-all": "^3.3.1",
+    "mocha": "^11.7.5",
+    "rimraf": "^3.0.2"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-react-jsx": "^7.28.6",
+    "@babel/preset-env": "^7.28.5",
+    "autoprefixer": "^9.8.8",
+    "babel-loader": "^8.4.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-minimizer-webpack-plugin": "^1.3.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
+    "glob": "^7.2.3",
+    "html-webpack-plugin": "^4.5.2",
+    "mini-css-extract-plugin": "^1.6.2",
+    "nyc": "^17.1.0",
+    "webpack": "^4.47.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-merge": "^6.0.1"
+  }
+}

package/test/index.js

@@ -0,0 +1,8 @@
+
+const path = require('path');
+
+process.chdir(path.join(__dirname, 'smoke/template'));
+
+describe('builder-webpack test case', () => {
+    require('./unit/webpack-base-test');
+});

package/test/smoke/css-js-test.js

@@ -0,0 +1,18 @@
+const glob = require('glob-all');
+
+describe('Checking generated css js files', () => {
+    it('should generate css js files', (done) => {
+        const files = glob.sync([
+            './dist/index_*.js',
+            './dist/index_*.css',
+            './dist/search_*.js',
+            './dist/search_*.css',
+        ]);
+
+        if (files.length > 0) {
+            done();
+        } else {
+            throw new Error('no css js files generated');
+        }
+    });
+});

package/test/smoke/html-test.js

@@ -0,0 +1,16 @@
+const glob = require('glob-all');
+
+describe('Checking generated html files', () => {
+    it('should generate html files', (done) => {
+        const files = glob.sync([
+            './dist/index.html',
+            './dist/search.html'
+        ]);
+
+        if (files.length > 0) {
+            done();
+        } else {
+            throw new Error('no html files generated');
+        }
+    });
+});

package/test/smoke/index.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const webpack = require('webpack');
+const rimraf = require('rimraf');
+const Mocha = require('mocha');
+
+const mocha = new Mocha({
+    timeout: '10000ms'
+});
+
+process.chdir(path.join(__dirname, 'template'));
+
+rimraf('./dist', () => {
+    const prodConfig = require('../../lib/webpack.prod.js');
+
+    webpack(prodConfig, (err, stats) => {
+        if (err) {
+            console.error(err);
+            process.exit(2);
+        }
+        console.log(stats.toString({
+            colors: true,
+            modules: false,
+            children: false
+        }));
+
+        console.log('Webpack build success, begin run test.');
+
+        mocha.addFile(path.join(__dirname, 'html-test.js'));
+        mocha.addFile(path.join(__dirname, 'css-js-test.js'));
+        mocha.run();
+    });
+});

package/test/smoke/template/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  parser: 'babel-eslint',
+  extends: 'airbnb',
+  env: {
+    browser: true,
+    node: true
+  },
+  rules: {
+    indent: ['error', 4]
+  }
+}

package/test/smoke/template/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env'
+  ],
+  plugins: [
+    '@babel/plugin-transform-react-jsx'
+  ]
+}