react webpack 多页面应用的配置
项目的目录结构
image.png
webpack 配置文件 目录
image.png
- webpack.common.config.js 下的 的配置
const path= require('path');
const webpack= require("webpack");
const HtmlWebpackPlugin= require('html-webpack-plugin');
//设置输入和输出的根路径
const ROOT_PATH= path.resolve(__dirname);
const APP_PATH= path.resolve(ROOT_PATH, 'src');
const BUILD_PATH= path.resolve(ROOT_PATH, 'dist');
const modules= ['home', 'goodsClass',
'cart', 'cartPreview','goodsDetail', 'login', 'order',
'groupBuy', 'timeBuy', 'content', 'circle','index'
];
//多页面的入口{ 'home': './src/modules/home'.....}
let entrys= {};
modules.forEach(module=>{
entrys[module]='./src/modules/${module}'
})
// html模板插件使用 使用forEach循环 减少冗余代码
const HtmlWebpack= [];
modules.forEach((item,index)=>{
let chunks= ['commons', item];
//动态生成html插件
HtmlWebpack[index]= new HtmlWebpackPlugin({
filename: `./${item}.html`, //生成的html存放路径，相对于 path
template: `./src/pages/temp.html`,
chunks: chunks,
inject: true, //允许插件修改哪些内容，包括head与body
hash: true, //为静态资源生成hash值
minify: {//压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
})
})
//css的提取处理
const extractLess= new ExtractTextPlugin({
filename: "[name].[hash].css"
});
//公共的插件
const commonPlugin= [
//提取公共资源的插件
new webpack.optimize.CommonsChunkPlugin({
names: "commons",
filename: "commons.[hash].js",
minChunks: 2
}),
extractLess,
//拷贝资源插件
new CopyWebpackPlugin([{
from: path.resolve(APP_PATH, 'assets'),
to: path.resolve(BUILD_PATH, 'assets')
}])
]
const svgDirs= [
//require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
path.resolve(__dirname, './src/assets/svg'), // 2. 自己私人的 svg 存放目录
];
module.exports={
entry:entrys,
output: {
path: BUILD_PATH,
filename: "[name].[hash].js",
},
//模块解析处理的规则
module: {
rules: [{
test: /\.js$/, //用babel编译jsx和es6
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(less|css)$/,
use: extractLess.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader', 'postcss-loader'],
})
}, {
test: /\.svg$/i,
use: 'svg-sprite-loader',
include: svgDirs
},
{
test: /\.(png|jpg|gif|jpeg)$/, //处理css文件中的背景图片
use: 'url-loader?limit=1&name=./static/assets/[name].[hash:4].[ext]'
//当图片大小小于这个限制的时候，会自动启用base64编码图片。减少http请求,提高性能
}
]
},
//其他处理
resolve:{
modules: [
path.resolve(__dirname, "./src"),
"node_modules"
],
extensions: ['.web.js', '.js', '.less', '.jsx', '.json'],
//模块别名的定义
alias: {
'container': path.resolve('./src/container'),
'commonComponent': path.resolve('./src/common/components'),
'common': path.resolve('./src/common'),
'baseComponent': path.resolve(__dirname, './src/base-components'),
'assets': path.resolve(__dirname, './src/assets'),
'styles': path.resolve(__dirname, './src/styles'),
'svg': path.resolve(__dirname, './src/assets/svg')
}
},
//插件的使用
plugins: HtmlWebpack.concat(commonPlugin)
}
2.webpack.dev.config.js 下的 的配置
const path= require('path');
const webpack= require("webpack");
let config= require('./webpack.common.config');
//需要转发的接口
var proxyInterface=[]
var proxy= {};
// 请求代理转发
proxyInterface.forEach(function(item) {
proxy[item]= {
target: 'http://10.10.1.15:8080/front',
changeOrigin: true,
logLevel: 'debug'
};
});
// 合并 Object.assign(target, ...sources) target目标对象。sources源对象。返回值目标对象。
config= Object.assign(config, {
devtool: '#eval-source-map', // for debug es6 source
// devtool: '#cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, "dist"),
// compress: true,
port: 3000,
host: '0.0.0.0',
//解决版本升级问题
//disableHostCheck:true,
overlay: {
warnings: true,
errors: true
},
proxy: proxy
},
plugins: [
...config.plugins,
new webpack.HotModuleReplacementPlugin(),
]
});
module.exports= config
3.webpack.pro.config.js 下的 的配置
const path= require('path');
const webpack= require("webpack");
const CleanPlugin= require("clean-webpack-plugin");
const CopyWebpackPlugin= require("copy-webpack-plugin");
let config= require('./webpack.common.config')
const ROOT_PATH= path.resolve(__dirname);
const BUILD_PATH= path.resolve(ROOT_PATH, 'dist');
config.plugins= [
...config.plugins,
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
//每次运行webpack清理上一次的文件夹
new CleanPlugin([BUILD_PATH]),
//压缩混淆JS插件,UglifyJsPlugin 将不再支持让 Loaders 最小化文件的模式。debug 选项已经被移除。Loaders 不能从 webpack 的配置中读取到他们的配置项。
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false
},
comments: false,
beautify: false
})
]
module.exports= config
