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
