new parallelUglifyPlugin({
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false, //false :关闭注释
},
compress: {
warnings: false,
drop_console: true,
collapse_vars: true,
reduce_vars: true,
},
},
sourceMap:true,// 开启sourcemap
})Last updated
// 抽离第三方的代码，也就是生产依赖里的代码,现在是单文件的入口：
entry: {
main: PATHS.app,
//vender:["react","react-dom","antd"],//引用的第三方库
},
mode:"production",
output: {
path: PATHS.build,
filename: filename,
publicPath:PATHS.publicPath,
},
optimization: {
runtimeChunk: {//包清单
name: "manifest"
},
splitChunks: { //拆分公共包
cacheGroups: {
vendor: {//第三方组件
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},// 抽离第三方的代码，也就是生产依赖里的代码,现在是单文件的入口：
entry: {
main: PATHS.main,
home: PATHS.home,
//vender:["react","react-dom","antd"], //引用的第三方库
},
mode:"production",
output: {
path: PATHS.build,
filename: filename,
publicPath:PATHS.publicPath,
},
optimization: {
runtimeChunk: {//包清单
name: "manifest"
},
splitChunks: { //拆分公共包
cacheGroups: {
common: {//项目公共组件，多个入口文件可以用到
chunks: "initial",//指定提取范围[],可以是所有"all"
name: "common",//提取公共代码的js文件名
minChunks: 2,//指定重复代码几次之后就提取出来
maxInitialRequests: 5,
minSize: 0
},
vendor: {//第三方组件
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},new copyWebpackPlugin([{
from:__dirname+'/src/assert',//打包的静态资源目录地址
to:'./assert' //打包到dist下面的public
}]),//拷贝静态资源到指定的位置，也就是不用编译这个目录下的文件output: {
path: PATHS.build,
filename: "js/[name].min.js", // name 对应entry里的入口配置名
publicPath:"./",
chunkFilename: 'js/[name].[chunkhash:5].chunk.js', // 生成对应额chunkhash加在文件名中 ，
//name 对应 用 bundle-loader加载时设置额名字,看下面额例子
// import Apiopt from "bundle-laoder?lazy&name=apiopt!../containner/apiopt/apiopt.js"
},import React ,{Component} from "react";
import { BrowserRouter ,HashRouter , Route ,Switch } from "react-router-dom";
import {Home} from "../component/home.js";
import ApiOpt from "bundle-loader?lazy&name=ApiOpt!../containner/apiopt/apiopt.js";
import Application from "bundle-loader?lazy&name=Application!../containner/application/application.js";
class Bundle extends Componet {
state={
mod:null,
}
componentWillMound(){
this.load(this.props);
}
componentWiillReciveProps(next,props){
if (nextProps.load !== this.props.load) {
this.load(nextProps)
}
}
load(){
this.setState({
mod: null
});
// 这里的 props.load 是用 babel-loader 引入的异步加载函数，不是组件，是下面这样函数，参数是个回调函数
//仔细看这个回调函数，发现它的参数才是真正的组件。使用 require()引入。
// 所以这里又涉及到，我们在导出 模块时候是 怎么的方式。
function(cb) {
Promise.all(
/*! require.ensure | Application */
[__webpack_require__.e("vendors~ApiOpt~Application"),
__webpack_require__.e("vendors~Application"),
__webpack_require__.e("Application")]).then((function(require) {
cb(__webpack_require__(
/*! !../../../node_modules/_babel-loader@7.1.4@babel-loader/lib!./application.js */
"./node_modules/_babel-loader@7.1.4@babel-loader/lib/index.js!./src/containner/application/application.js"));
}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);
}
props.load((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod
// 刚开始我不理解这个mod 是啥，现在很清楚了，是个用require 引入的模块
// .default 是我们用的 export default 导出的。 所以 我们用require 时。 module 对象里的 key 值 default
// 要是 我们用 export { } ，这里肯定就不能用default ,因为 module里的key 值就是我们当时定义的模块名
// 然而我们最好使用 export default 导出 ，不然 不然在这个方法里不知道定义的模块名是什么。
})
})
}
render(){
return this.props.children(this.state.mod); // 返回的是真正的组件
}
}
const Loading=()=>{
return (<div>Loading......</div>);
}
const createComponent = (component)=>{
return (
<Bundle load={component}>
(Component) => Component ? <Component {...props} /> : <Loading/>
</Bundle>
);
}
const Routes=(
<Route path="./application" component={createComponent(Appliction)} ></Route>
<Route path="./apiopt" component={createComponent(ApiOpt)} ></Route>
)