vue项目打包成普通html源码,webpack打包vue项目时，想html引入vue源码和业务代码分两个js，怎么实现...

项目里使用了vue,vue-resource，等等，打包的时候build.js居然有900多k，想把这些插件源码和我的业务代码分开加载，怎么实现。

刚开始以为是CommonsChunkPlugin就可以，但打包后发现两个文件都是900k，应该是没get对CommonsChunkPlugin使用方法，或理解错了CommonsChunkPlugin的含义。

想问问怎么才能实现html引入两个js，一个js是插件的源码，另一个是业务代码。

webpack.config.js

var path = require('path')

var webpack = require('webpack')

module.exports = {

entry: {

build: './src/main.js',

vendor: ['vue','vue-resource']

},

output: {

path: path.resolve(__dirname, './dist'),

publicPath: '/dist/',

filename: '[name].js'

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

}

// other vue-loader options go here

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

test: /\.(png|jpg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

},

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js'

}

},

devServer: {

historyApiFallback: true,

noInfo: true

},

performance: {

hints: false

},

devtool: '#eval-source-map',

plugins: [

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

}

}),

new webpack.optimize.CommonsChunkPlugin({name:'vendor',  filename:'vendor.js'})

]

}

main.js

import Vue from 'vue'

import App from './App.vue'

import VueResource from 'vue-resource'

Vue.use(VueResource)

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

Vue.use(MintUI)

import router from './router'

new Vue({

el: '#app',

router,

render: h => h(App)

})

可以参考 Vue-cli 的配置：https://github.com/vuejs-temp…

把vendor里面的vue改成vue/dist/vue.esm.js试试

vue-cli的配置是用commonChunkPlugin把node_modules里的模块都打包成vendor.js：

// split vendor js into its own file

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor',

minChunks: function (module, count) {

// any required modules inside node_modules are extracted to vendor

return (

module.resource &&

/\.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, '../node_modules')

) === 0

)

}

}),

// extract webpack runtime and module manifest to its own file in order to

// prevent vendor hash from being updated whenever app bundle is updated

new webpack.optimize.CommonsChunkPlugin({

name: 'manifest',

chunks: ['vendor']

}),

然后把其它静态资源(也包括js)一股脑复制到dist/static目录里，然后让你自己写

<script>

来加载。

我觉得这只适合于你用的库大部分都来自于npm模块的情况，像我就有很多用的第三方库都不是直接从npm来的。

我建议还是用commonChunk，但是手动指定那些模块(第三方库)需要打包进vendor.js，请看明确第三方库 chunk