custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
216 lines (211 loc) • 9.07 kB
JavaScript
let fs = require("fs")
let path = require("path");
let webpack = require("webpack");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
//自动生成html的插件
let HtmlWebpackPlugin = require("html-webpack-plugin");
let DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let reactAppPath = require('./rootpath').path
reactAppPath = reactAppPath.split(",").join(path.sep)
let projectName = require('./project').name
//let deployPath = process.env.WEBPACK_MODE == 'production' ? (process.env.CATALINA_BASE + '/reactapps/itims4') : reactAppPath;
let deployPath = reactAppPath;
let outputPath = path.resolve(deployPath, (process.env.NODE_ENV == 'production' ? path.join('dist', projectName) : path.join('build', projectName)));
let htmlPlugins = [
new HtmlWebpackPlugin({
minify: {
removeAttributeQuotes: true
},
template: path.join(reactAppPath, 'src', projectName, 'index.html'),
filename: 'index.html',
contextPath: '/itims4'
})]
try {
fs.readFileSync(path.join(reactAppPath, "src", projectName, "index.html"))
} catch (error) {
htmlPlugins = []
}
let useHash = (process.argv.length >= 2 && process.argv[1].indexOf("devServer.conf") != -1) ? true : (process.argv.indexOf("-h") != -1 ? true : false)
let report = (process.argv.indexOf("-r") != -1 ? true : false)
let reportPlugins = report ? [new BundleAnalyzerPlugin()] : []
let isPlugin = false
try {
const tpackageJSON = require(path.join(reactAppPath, "src", projectName, "package.json"))
if (tpackageJSON && tpackageJSON.moduleType == 'plugin') {
isPlugin = true
}
} catch (error) {
}
let pathList = path.resolve().split(path.sep)
pathList = pathList.slice(0, pathList.indexOf("reactapp"))
let dllPath = path.join(path.resolve(__dirname, ".."), "node_modules", "dhcc-app-dll", "dll")
module.exports = {
entry: { app: [path.join(reactAppPath, 'src', projectName, 'index.js')] },
output: {
filename: "index.js",
path: outputPath,
/*
* chunkFilename用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件
* 比如在main.js文件中,require.ensure([],function(require){alert(11);}),这样不会打包块文件
* 只有这样才会打包生成块文件require.ensure([],function(require){alert(11);require('./greeter')})
* 或者这样require.ensure(['./greeter'],function(require){alert(11);})
* chunk的hash值只有在require.ensure中引入的模块发生变化,hash值才会改变
* 注意:对于不是在ensure方法中引入的模块,此属性不会生效,只能用CommonsChunkPlugin插件来提取
* */
// chunkFilename: 'chunk/' + (useHash ? '[chunkhash:8].' : '') + projectName + '.js'
},
optimization: {
// 找到chunk中共享的模块,取出来生成单独的chunk
splitChunks: isPlugin ? {} : {
chunks: "all",
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'vendors/' + (useHash ? '[chunkhash:8].' : '') + projectName,
},
default: {//cacheGroups重写继承配置，设为false不继承
// minChunks: 2,
priority: -20,
name: 'common/' + (useHash ? '[chunkhash:8].' : '') + projectName,
reuseExistingChunk: true
}
}
}
},
resolve: {
alias: {
'componets': path.join(__dirname, "src", "components"),
'react-native': 'react-native-web',
// 'react$' : '/path/to/react.min.js'//alias还支持$符号来缩小范围只命中以关键字结尾的导入语句
},
extensions: ['.js', '.json', '.css', '.less', '.txt'],
modules: [path.join(path.resolve(__dirname, ".."), "src", "components"), path.join(path.resolve(__dirname, ".."), "node_modules")]
},
plugins: [
new DllReferencePlugin({
manifest: require(dllPath + '/antd-manifest.json'),
context: __dirname
}),
// new DllReferencePlugin({
// manifest: require(dllPath + '/css-manifest.json'),
// // context: __dirname
// }),
// new DllReferencePlugin({
// manifest: require(dllPath + '/semantic-manifest.json'),
// // context: __dirname
// }),
new DllReferencePlugin({
manifest: require(dllPath + '/jquery-manifest.json'),
context: __dirname
}),
new DllReferencePlugin({
// 描述 react 动态链接库的文件内容
manifest: require(dllPath + '/reacts-manifest.json'),
context: __dirname
}),
new DllReferencePlugin({
manifest: require(dllPath + '/reduxs-manifest.json'),
context: __dirname
}),
new DllReferencePlugin({
manifest: require(dllPath + '/reactTable-manifest.json'),
context: __dirname
}),
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|zh-hk|en/),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
React: 'react',
ReactDOM: 'react-dom',
Component: ['react', 'Component'] // 导出react模块中的Component
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'css/style.css',
chunkFilename: 'css/' + (useHash ? '[chunkhash:8].' : '') + projectName + '.css',
})
].concat(htmlPlugins).concat(reportPlugins),
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
// include: [path.join(path.resolve(__dirname, '..'), 'src')], // 限制打包范围，提高打包速度
// exclude: [path.join(path.resolve(__dirname, '..'), 'node_modules')],
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.WEBPACK_MODE === 'development',
reloadAll: true
},
},
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: path.join(path.resolve(__dirname, '..'), 'config') // 写到目录即可，文件名强制要求是postcss.config.js
}
}
},
{
loader: "sass-loader", // 编译sass，webpack默认使用node-sass进行编译，所以需要同时安装 sass-loader 和 node-sass
options: { // loader 的额外参数，配置视具体 loader 而定
sourceMap: true, // 要安装resolve-url-loader，当此配置项启用 sourceMap 才能正确加载 Sass 里的相对路径资源，类似background: url(../image/test.png)
}
}
],
},
{
test: /\.(jpg|png|svg|gif|woff|woff2|eot|ttf)/,
use: [
// {
// // webpack通过file-loader处理资源文件，它会将rules规则命中的资源文件按照配置的信息（路径，名称等）输出到指定目录，并返回其资源定位地址（输出路径，用于生产环境的publicPath路径），默认的输出名是以原文件内容计算的MD5 Hash命名的
// loader: "file-loader",
// options: {
// outputPath: "images/"
// }
// },
{
// 构建工具通过url-loader来优化项目中对于资源的引用路径，并设定大小限制，当资源的体积小于limit时将其直接进行Base64转换后嵌入引用文件，体积大于limit时可通过fallback参数指定的loader进行处理。
// 打包后可以看到小于8k的资源被直接内嵌进了CSS文件而没有生成独立的资源文件
loader: 'url-loader',
options: {
limit: 8129,//小于limit限制的图片将转为base64嵌入引用位置
name: 'imgs/' + (useHash ? '[hash:8].' : '') + '[name].[ext]',
// fallback: 'file-loader',//大于limit限制的将转交给指定的loader处理，开启这里后就无需再单独配置file-loader
// outputPath: 'images/'//options会直接传给fallback指定的loader
publicPath: '../'
}
}
]
},
{//转义es6/es7/jsx
test: /\.js$/,
exclude: /node_modules/,
include: path.join(reactAppPath, "src"),
use: {
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
}
}
]
}
}