js文件引用 webpack_文件import导入的js,webpack打包时怎么单独打包?

周健
2023-12-01

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引入

 类似资料: