jsx文件引入
import ‘echarts/map/js/usa.js’;
部署时webpack怎么单独打包出来?
换一种说法,如果我想把项目文件打包成多个js文件,webpack该如何配置?
如果你的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'"。
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 插件。
我也不知道,不过有个思路
插件类文档可以使用
CopyWebpackPlugin
单独打包到独立的文件夹中,可以不必用import引入