webpack多页面 – 技术分享

背景

传统多页面项目，每个项目引入公共组件js和第三方js

方案

webpack.util.js

const fs = require('fs')

function getAllFileArr(path) {
  let AllFileList = []
  getAllFile(path)
  function getAllFile(path) {
    let files = []
    if (fs.existsSync(path)) { // 是否存在此路径
      files = fs.readdirSync(path) // 获取当前目录下一层文件列表
      files.forEach((file) => { // 遍历获取文件
        let curPath = `${path}/${file}`
        if (fs.statSync(curPath).isDirectory()) { // recurse 查看文件是否是文件夹
          getAllFile(curPath) // 如果是文件夹，继续遍历获取
        } else if (file !== '.DS_Store') {
          // .DS_Store是IDE配置文件不用计入到文件列表
          if (file.split('.')[1] === 'js' || file.split('.')[1] === 'jsx') {
            AllFileList.push([file, path, curPath]) 
          }
        }
      })
    }
  }
  return AllFileList
}

function getEntry(path) {
  let file_list = getAllFileArr(path)
  let entry = {}
  file_list.forEach((item) => {
    entry[`${item[2].replace('./app/view', '')}`] = item[2] 
  })
  entry['style/index.css'] = './app/view/common/common.scss'
  entry['style/mobileCommon.css'] = './app/view/mobile_common/mobileCommon.scss'
  return entry
}

exports.getEntry = getEntry
exports.getAllFileArr = getAllFileArr

const fs = require('fs')

function getAllFileArr(path) {

let AllFileList = []

getAllFile(path)

function getAllFile(path) {

let files = []

if (fs.existsSync(path)) { // 是否存在此路径

files = fs.readdirSync(path) // 获取当前目录下一层文件列表

files.forEach((file) => { // 遍历获取文件

let curPath = `${path}/${file}`

if (fs.statSync(curPath).isDirectory()) { // recurse 查看文件是否是文件夹

getAllFile(curPath) // 如果是文件夹，继续遍历获取

} else if (file !== '.DS_Store') {

// .DS_Store是IDE配置文件不用计入到文件列表

if (file.split('.')[1] === 'js' || file.split('.')[1] === 'jsx') {

AllFileList.push([file, path, curPath])

}

})

}

return AllFileList

}

function getEntry(path) {

let file_list = getAllFileArr(path)

let entry = {}

file_list.forEach((item) => {

entry[`${item[2].replace('./app/view', '')}`] = item[2]

})

entry['style/index.css'] = './app/view/common/common.scss'

entry['style/mobileCommon.css'] = './app/view/mobile_common/mobileCommon.scss'

return entry

}

exports.getEntry = getEntry

exports.getAllFileArr = getAllFileArr

webpack.config.js

const path = require('path')
const utils = require('./webpack.util.js')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HappyPack = require('happypack')
const os = require('os')

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
const CopyWebpackPlugin = require('copy-webpack-plugin')
const {version} = require('./config/config.default')({name: 'df'})

const extractSass = new ExtractTextPlugin({
  filename: '[name]',
})
module.exports = {
  entry: utils.getEntry('./app/view/pages'),
  // mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
          }
        ]
      },
      {
        test: /\.scss$/,
        use: extractSass.extract({
          use: [{
            loader: 'happypack/loader?id=cssLoader',
          }, {
            loader: 'happypack/loader?id=scssLoader',
          }],
          fallback: 'style-loader'
        })
      },
      {
        test: /.jsx$/,
        exclude: /node_modules/,
        loader: 'happypack/loader?id=js',
      },
      {
        test: /.js$/,
        loader: 'happypack/loader?id=js',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      },
      {
        test: /\.(jpg|jpeg|png|svg)$/,
        loader: 'file-loader'
      },
    ]  
  },
  plugins: [
    extractSass,
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: [{
        loader: 'babel-loader',
        query: {  
          cacheDirectory: './webpack_cache/',
        },
      }]
    }),
    new HappyPack({ id: 'scssLoader', threadPool: happyThreadPool, loaders: ['fast-sass-loader']}),
    new HappyPack({ id: 'cssLoader', threadPool: happyThreadPool, loaders: ['css-loader'] }),
    new CopyWebpackPlugin([{ from: `${__dirname}/app/view/img`, to: `${__dirname}/app/public/resource` }]), 
  ],
  performance: {
    hints: false
  },
  watchOptions: {
    aggregateTimeout: 100,
    poll: 100
  },
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 0,
      minChunks: 2,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        common: {
          test: /\.js(x)$/,
          chunks: 'initial',
          name: 'common/common.js',
          minChunks: 10,
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'common/vendor.js',
          priority: 10,
          enforce: true
        }
      }
    }
  },
  output: {
    path: `${__dirname}/app/public/${version}`, // 打包路径
    publicPath: 'public', // 静态资源相对路径
    filename: '[name]' // 打包后的文件名，[name]是指对应的入口文件的名字
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss']
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

const path = require('path')

const utils = require('./webpack.util.js')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const HappyPack = require('happypack')

const os = require('os')

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

const CopyWebpackPlugin = require('copy-webpack-plugin')

const {version} = require('./config/config.default')({name: 'df'})

const extractSass = new ExtractTextPlugin({

filename: '[name]',

})

module.exports = {

entry: utils.getEntry('./app/view/pages'),

// mode: 'development',

module: {

rules: [

{

test: /\.css$/,

use: [

{

loader: 'css-loader',

}

]

{

test: /\.scss$/,

use: extractSass.extract({

use: [{

loader: 'happypack/loader?id=cssLoader',

}, {

loader: 'happypack/loader?id=scssLoader',

}],

fallback: 'style-loader'

})

{

test: /.jsx$/,

loader: 'happypack/loader?id=js',

{

test: /.js$/,

loader: 'happypack/loader?id=js',

path.join(__dirname, '../node_modules')

]

{

test: /\.(jpg|jpeg|png|svg)$/,

loader: 'file-loader'

]

plugins: [

extractSass,

new HappyPack({

id: 'js',

threadPool: happyThreadPool,

loaders: [{

loader: 'babel-loader',

query: {

cacheDirectory: './webpack_cache/',

}]

}),

new HappyPack({ id: 'scssLoader', threadPool: happyThreadPool, loaders: ['fast-sass-loader']}),

new HappyPack({ id: 'cssLoader', threadPool: happyThreadPool, loaders: ['css-loader'] }),

new CopyWebpackPlugin([{ from: `${__dirname}/app/view/img`, to: `${__dirname}/app/public/resource` }]),

performance: {

hints: false

watchOptions: {

aggregateTimeout: 100,

poll: 100

optimization: {

splitChunks: {

chunks: 'async',

minSize: 0,

minChunks: 2,

maxAsyncRequests: 5,

maxInitialRequests: 3,

cacheGroups: {

common: {

test: /\.js(x)$/,

chunks: 'initial',

minChunks: 10,

vendor: {

test: /node_modules/,

chunks: 'initial',

priority: 10,

enforce: true

}

output: {

path: `${__dirname}/app/public/${version}`, // 打包路径

publicPath: 'public', // 静态资源相对路径

filename: '[name]' // 打包后的文件名，[name]是指对应的入口文件的名字

resolve: {

extensions: ['.js', '.jsx', '.scss']

}