const host = 'http://xxx.com/api' // 测试地址 module.exports = { dev: { // proxy代理配置 proxyTable: { '/api': { target: host, // 源地址 changeOrigin: true, // 改变源 logLevel: 'debug', ws: true, pathRewrite: { '^/api': '' // 路径重写 } } }, build: { // build输出路径 // assetsRoot: path.resolve(process.cwd(), '') } // 是否启用postcss-pxtorem插件 https://github.com/cuth/postcss-pxtorem // pxtorem: true } }
这里就是根据需要自行配置了，如果不需要完全可以不要这个文件，重要的还是entry的入口文件。
打包出口配置
入口改好了，我们再看出口，找到如下内容
// webpack.dev.conf.js plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ]
// webpack.prod.conf.js new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }), // 省略 // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.build.assetsSubDirectory, ignore: ['.*'] } ])
HtmlWebpackPlugin的作用是生成一个 HTML5 文件，CopyWebpackPlugin的作用是将单个文件或整个目录复制到构建目录。我们在utils.js中新建2个方法getHtmlWebpackPlugin和getCopyWebpackPlugin，对这两个方法进行替换，让他们支持多入口。改动后如下
// webpack.dev.conf.js plugins: [ new webpack.DefinePlugin({ 'process.env': require('./dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin // 改动 ...utils.getHtmlWebpackPlugin(baseWebpackConfig), // copy custom static assets // 改动 ...utils.getCopyWebpackPlugin() ]
// webpack.prod.conf.js // 改动 ...utils.getHtmlWebpackPlugin(baseWebpackConfig), // 省略 // 改动 ...utils.getCopyWebpackPlugin()
// utils.js exports.getHtmlWebpackPlugin = baseWebpackConfig => { const HtmlWebpackPluginList = [] const entryNames = Object.keys(baseWebpackConfig.entry) entryNames.forEach(name => { HtmlWebpackPluginList.push( new HtmlWebpackPlugin( Object.assign({ filename: config.build.filename && process.env.NODE_ENV == 'production' ? config.build.filename : `${name}.html`, template: config.build.template && process.env.NODE_ENV == 'production' ? path.resolve( paths.projectPath, config.build.template) : path.resolve( paths.projectPath, `${name}.html` ), inject: true, excludeChunks: entryNames.filter(n => n !== name) }, process.env.NODE_ENV === 'production' ? { minify: { removeComments: true, collapseWhitespace: true // removeAttributeQuotes: true }, chunksSortMode: 'dependency' } : {} ) ) ) }) return HtmlWebpackPluginList } exports.getCopyWebpackPlugin = () => { const projectStaticPath = path.resolve(paths.projectPath, 'static') const assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory const rootConfig = { from: paths.static, to: assetsSubDirectory, ignore: ['.*'] } const projectConfig = { from: projectStaticPath, to: assetsSubDirectory, ignore: ['.*'] } return [ new CopyWebpackPlugin( fs.existsSync(projectStaticPath) ? [rootConfig, projectConfig] : [rootConfig] ) ] }
修改index.js
我们找到config里index.js,对其做一些修改，让我们可以在项目里的config.js中配置代理，打包目录，让模板更灵活。
// config/index.js 改造前 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST }, build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: 'https://www.jb51.net/', // 省略 }