webpack4+react项目搭建(四)

多页面配置

1.创建build/utils.js

1）获取入口文件

function getEntry(projectName) {
   let entries = {};
   if (projectName) {
      let obj = {};
      obj[projectName] = projectConfig.projects[projectName];
      entries = projectName === 'all' ? projectConfig.projects : obj;
   } else {
      entries = projectConfig.projects;
   }
   return entries;
}

2）获取出口文件

function getOutput(projectName) {
   let outPath = '';
   let outPublicPath = '';
   outPath = path.resolve(__dirname, '../dist');
   let output = {
     path: outPath,
     publicPath: outPublicPath,
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
     sourceMapFilename: '[file].map'
   };
   return output;
}

3）获取要清理的文件

function getCleanPath(projectName) {
   let arr = [];
   if (projectName) {
     arr = [path.resolve(process.cwd(), `dist/assets/${projectName}/`), path.resolve(process.cwd(), `dist/${projectName}/`), path.resolve(process.cwd(), `dist/${projectName}.js`), path.resolve(process.cwd(), `dist/css/${projectName}*.css`)];
   } else {
     arr = [path.resolve(process.cwd(), "dist/")];
   }
   return arr;
}

4）需要拷贝的资源路径

function getCopyPath(projectName) {
   let copyFromPath = '';
   let copyToPath = '';
   if (projectName) {
     copyFromPath = projectName === 'all' ? path.resolve(__dirname, '../src/assets') : path.resolve(__dirname, `../src/assets/${projectName}`);
     copyToPath = projectName === 'all' ? 'assets' : `assets/${projectName}`;
   } else {
     copyFromPath = path.resolve(__dirname, '../src/assets'  );
     copyToPath = 'assets';
   }
   return {
     from: copyFromPath,
     to: copyToPath
   };
}

2. 更改webpack配置文件

build/webpack.common.js
const { getCopyPath, getOutput, getEntry, getCleanPath } = require('./utils');
var projectName = process.argv.slice(2)[0];
function webpackCommonConfigCreator(options) {
  let obj = {
    mode: options.mode,
    entry: getEntry(projectName),
    output: getOutput(projectName)
    module: {
       rules: [
        {
          test: /\.(js|jsx)$/,
          include: path.resolve(__dirname, "../src"),
          use: [
          {
             loader: "babel-loader",
             options: {
                presets: ['@babel/preset-react'],
                plugins: ["react-hot-loader/babel"]
           }
         }
        ]
     },
     {
        test: /\.(css|scss)$/,
        include: path.resolve(__dirname, '../src'),
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
           {
              loader: "css-loader",
              options: {
                modules: {
                  mode: "local",
                  localIdentName: '[path][name]_[local]--[hash:base64:5]'
                },
                localsConvention: 'camelCase'
              }

           },
           "sass-loader",
           {
              loader: "postcss-loader",
              options: {
                ident: 'postcss',
                plugins: loader => [
                   require('postcss-import')({ root: loader.resourcePath }),
                   require('autoprefixer')()
                ]
              }
            }
          ]
      })
    },
   {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [{
         loader: 'file-loader',
         options: {
            name: '[name].[hash].[ext]'
         }
      }]
   },
   {
      test: /\.(jpg|png|svg|gif)$/,
      use: [
      {
       loader: 'url-loader',
       options: {
         limit: 10240,
         name: '[name].[hash].[ext]'
       }
      }
     ]
   }
  ]
},
plugins: [
   new CopyWebpckPlugin([{
     from: getCopyPath(projectName).from,
     to: getCopyPath(projectName).to
   }]),
   new CleanWebpackPlugin({
   cleanOnceBeforeBuildPatterns: getCleanPath(projectName) 
   }),
   new ExtractTextPlugin({
    filename: "css/[name][hash].css"
   })
]}
let arr = getHtmlPlugin(projectName);
if (arr.length > 0) {
   arr.forEach((item) => {
     obj.plugins.push(item);
   })
}
 return obj;
}
module.exports = webpackCommonConfigCreator;