文件import导入的js，webpack打包时怎么单独打包？

Question

jsx文件引入
import 'echarts/map/js/usa.js';

部署时webpack怎么单独打包出来？

换一种说法，如果我想把项目文件打包成多个js文件，webpack该如何配置？

Answer 1

如果你的echarts已经修改成了通过cdn引入的话，可以试试在index.html这么写：

<script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
<script src="http://xxxxxxxxxxxxxxxxxx/usa.js"></script>

把usa.js文件放到cdn（七牛等）上然后在echarts后面引用。
然后去掉代码中的"import 'echarts/map/js/usa'"。

Answer 2

webpack，参照下面的配置，可以独立打一个 echarts.js 。
不知道是不是你要的。

entry: {
    index: './app/main.jsx',
    vendor: ['react', 'react-dom', 'react-router','echarts/map/js/usa']
},
plugins: [
    // 补充内容，如果你要优化代码，这里重新配置即可。这样，就会把 index 里面的 抽出来了。
    new webpack.optimize.CommonsChunkPlugin({
        names: 'commons',
        chunks:['index','vendor']
    })
]

// index.js
// vendor.js
// commons.js 这样会把通用模块抽离出来。

补充答案
上面的方案，适合优化代码，抽了通用的代码。

如果，不想每次构建都做这些事情。webpack提供了更好的方案。DllPlugin 和 DllReferencePlugin

// webpack.dll.config.js
const path    = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
      vendor: ['react', 'react-dom', 'react-router','echarts/map/js/usa']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_library'//当前情况下将生成，`window.vendor_library`
  },
  plugins: [
    new webpack.DllPlugin({ // 这段配置会在 dist 目录生成一个 vendor-manifest.json 文件。
      context: __dirname,
      path: path.join(__dirname, 'dist', '[name]-manifest.json'), // 各模块的索引文件，提供给DllReferencePlugin读取
      name: '[name]_library' // 所有的内容会存放在这个参数指定的变量下，这个参数跟 output.library保持一致
    })
  ]
};

添加好上面配置后，就可以执行下面代码，生成 dll 文件。

webpack --config webpack.dll.config.js

执行上面命令会在dist目录生成：2个文件vendor.dll.js 、vendor.manifest.json, 下面的流程会用到。

// webpack.config.js
const path    = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        'index': ['./app/main.jsx']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].js',
        chunkFileName: 'js/[id].js'
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./dist/vendor-manifest.json') // 指定manifest.json，也就是上面生成的。
        })
    ]
};

这个方案的弊端，就是需要手动在index.html 里面添加

<script type="text/javascript" src="vendor.dll.js"></script>

如果不想手写，可以用add-asset-html-webpack-plugin 插件。

Answer 3

我也不知道，不过有个思路
插件类文档可以使用CopyWebpackPlugin单独打包到独立的文件夹中，可以不必用import引入