webpack配置

webpack：3.10.0 webpack 打包拆分，

module.exports = {
    entry:{
        app: "./app1/index.js",
        app2: "./app1/index1.js"
    },
    output: {
        path: path.resolve(__dirname + "/build/"),
        filename: "[name]-[hash:8].js",
        chunkFilename: '[name].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    // options: {
                        // presets: [
                        //     ["@babel/preset-env", // 指定需要编译的语法
                        //     {
                        //         targets: { // 指定需要兼容的浏览器，第一个是市场百分比
                        //             browsers: [">1%", "last 2 versions"]
                        //         }
                        //     }]
                        // ] // 指定编译的规则，es6或者es7需要用babel-loader编译
                    // }
                },
                exclude: '/node_module/',
                include: path.resolve(__dirname +"/app1/")
            }
        ]
    },
    plugins: [
    // 提取公共的模块，取名common
        new webpack.optimize.CommonsChunkPlugin({
            name:"common",
            minChunks: 2   // 公共模块出现两次以上被引用才提取出来
        })
    ]
}

webpack.optimize.CommonsChunkPlugin 方法提取公共模块只能是在多个entry文件 共同引入了相同模块时，才能提取公共的模块， 如果只有一个entry时，是不生效的，

###提取第三方的公共插件，如提取lodash插件

var webpack = require("webpack")
var path = require("path")
module.exports = {
    entry:{
        app: "./app1/index.js",
        app2: "./app1/index1.js",
        vendor: ["lodash"]
    },
    output: {
        path: path.resolve(__dirname + "/build/"),
        filename: "[name]-[hash:8].js",
        chunkFilename: '[name].chunk.js',
        
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: '/node_module/',
                include: path.resolve(__dirname +"/app1/")
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendor",
            minChunks: Infinity
        })
    ]
}

####ERROR in CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (vendor) 错误原因：当使用commonschunkplugin提取插件时，如果同时要提取第三方的公共插件，切同时提取webpack自身打包的插件时，需要指定当前的公告插件的范围

plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name:"common",
            minChunks: 2,
            chunks: ["app","app2"]  // 添加这个属性，就不会报错了
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendor",
            minChunks: Infinity
        })
    ]

代码拆分

当只有一个entry的时候，在界面直接引入 插件，webpack就会根据需要引入的插件自动拆分，而不需要其他配置 require.ensure 只是拆分代码，如有要引用加载，还需要在callback里面require插件才行，

require.ensure(["./PageA"],function(){
    var a = require("./PageA");   // 此处才是真正的引入了代码
}, "coma")

include方法会自动加载当前的组件

import(/*webpackChunkName:'pageA'*/"./PageA").then(a=>{
    console.log(a);
})

react-router按需加载

// boundle.js
import React, { Component } from 'react'
class Bundle extends Component {
  constructor() {
    super()
    this.state = {
      mod: null
    }
  }

  componentDidMount() {
    this.props.load((mod) => {
      this.setState({
        mod: mod.default || mod
      })
    })
  }

  render() {
    return (
      this.state.mod ? this.props.children(this.state.mod) : <div className="boundle-loading">加载中...</div>
    )
  }
}

export default Bundle

import Boundle from './boundle'
function getComponent(path) {
    return (props)=>(<Boundle load={path}>
        {(Component)=><Component {...props}/>}
    </Boundle>)
}

const CreateProduct = getComponent((page)=>{
    require.ensure([], require=>{
        page(require('./pages/create-product/create-product').default)
        }, 'CreateProduct')
    })

render((
    <Router history={hashHistory}>
        <Route path="/" component={CreateProduct }></Route>
 </Router>), document.getElementById('app'))