require.ensure(['./a'], function(require){
  let b = require('./b');
  let a = require('./a');
  console.log(a+b)
});

let a = require('./a');
require.ensure(['./a'], function(require){
  let b = require('./b');
  console.log(a+b)
});

require.ensure(['./c'], function(require){
  let a = require('./a');
  console.log(a)
});

require.ensure(['./c'], function(require){
  let b = require('./b');
  console.log(b)
});

require.ensure(['./c'], function(require){
  let a = require('./a');
  console.log(a)
}, 'd');

require.ensure(['./c'], function(require){
  let b = require('./b');
  console.log(b)
}, 'd');

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'css-loader'
  }]
}

let css = require('./main.css');
console.log('' + css);

module: {
  loaders: [{
    test: /\.css$/,
    exclude: /node_modules/,
    loader: 'style-loader!css-loader'
  }]
}

npm i --save-dev extract-text-webpack-plugin

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = function () {
  return {
    entry: './index.js',
    output: {
      path: './build',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        test: /\.css$/,
        exclude: /node_modules/,
        // 在 loader 中使用该插件
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }]
    },
    plugins: [
      // 将其添加在插件中
      new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true })
    ]
  }
}

npm i react react-dom --save

// webpack.config.js

module.exports = {
  entry: 'index.js',
  output: {
    path: 'build/',
    filname: '[name]@[chunkhash].js'
  },
  module:{
    loaders:[{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel'
    }]
  }
}

import React from 'react';
import ReactDOM from 'react-dom';


var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<Hello name={'world'} />, document.getElementById('app'));

<div id="app"></div>
<!--entry 为一个字符串，这个 chunk 的名字会是 main， 因此这里引入 main.js -->
<script src="/UploadFiles/2021-04-02/main.js">

启动 webpack-dev-server，打开浏览器这个时候应该能在页面上看到 hello world，这说明工作正常。
4. 拆分框架代码
为了拆分框架代码，我们需要增加一个入口，在这个入口中要包含 react 和 react-dom


module.exports = {
  entry: {
    main: 'index.js',
    vendor: ['react', 'react-dom']
  }
  //...
}



单单像上面这样配置，打包后会得到 main.js 和 vendor.js，但会发现在 main.js 中依然包含了 react 和 react-dom 的代码，这是因为指定了入口后，webpack 就会从入口文件开始讲整个依赖打包进来，index.js 中引用了 react 和 react-dom 自然会被打包进去。要想达到之前所说的那个效果，还需要借助一个插件 —— CommonsChunkPlugin
5. 使用 CommonsChunkPlugin
这个插件的功能是将多个打包结果中公共的部分抽取出来，作为一个单独的文件。它符合目前的场景，因为 main.js 和 vendor.js 中存在一份公共的代码，那就是 vendor.js 中的内容。（这个说法并不准确，这里只是指 react 和 react-dom 都被打包进了这两个文件）


let webpack = require('webpack');

module.exports = {
  entry: {
    main: 'index.js',
    vendor: ['react', 'react-dom']
  },
  //...

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor' // 指定一个希望作为公共包的入口
    })
  ]
}




再进行打包，这个时候会发现 main.js 中的代码不在包含 react 的代码了。看似实现了我们的需求，但真实应用下并没有这么简单，在实际项目中 js 脚本通常都会给添加一个 MD5 的 hash 在后面，形如 app@709d9850745a4c8ba1d4.js 这样每次打包后，如果文件内容变了，后面的 hash 也会变动。就以上场景，会发现当我们修改了业务代码后，得到的 hash 是不同的，因此每次都会得到两个不同的打包结果。业务代码改变了，拆分出来的框架包也变了，这显然不符合初衷 —— 利用浏览器缓存。
这是因为 webpack 在打包的时候会产生一些运行时代码，比如 __webpack_require__ 、webpackJsonp 等等，这些函数是用来帮助 webpack 完成模块加载等功能的，业务代码的改变会导致业务代码打包后的 hash 值改变，而在 webpack 的运行时代码中实际上是保存了打包后的结果的文件名的，因为它在异步加载模块的时候需要用到。因此，下面需要做的是将 webpack 的运行时代码拆分出来。
修改 plugins 如下，将 name 修改为 names，并增加一个 init 的包名，执行打包，会发现 webpack 的运行时代码都被入该包内。


plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'init']
  })
]


这样以来，修改了业务代码后，vendor 因为只引用了 react 和 react-dom 因此，业务代码的改变不会改变 vendor 这个包的内容，hash 也保持不变。但，也仅仅如此 如果你引用了其他模块，webpack 收集依赖的时候会给每个模块编一个号，引入其他模块会导致模块数改变，也就会导致编号改变，这个时候打包出来的 vendor 还是会改变。
那么到底该如何解决这个问题呢？在官方文档上没有找到解决方案。后面我会继续探索这一问题，找到解决方案后会及时更新到这里，如果你有解决方案，还请不吝赐教，谢谢。


希望本文所述对你有所帮助，webpack代码拆分内容就给大家介绍到这里了。希望大家继续关注我们的网站!