背景
传统多页面项目,每个项目引入公共组件js和第三方js
方案
webpack.util.js
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 |
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
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 |
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'] } } |