Vue.js
Vue-cli现代模式如何与dll相安无事
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
发现一个问题，当vue-cli3搭建的项目开启dll功能后，常规模式下运行正常。但是在现代模式下会包vue未定义的错误。难道 现代模式和dll之间还有森么说法么。测试去掉type=module就可以，那么type=module究竟该怎么用
//vue.config.js
const path = require("path")
const webpack = require("webpack")
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); //html插入dll.js
module.exports = {
chainWebpack: config => {
config
.plugin('asset-html')
.use(AddAssetHtmlPlugin, [{
filepath: path.resolve(__dirname, './dll/*.dll.js')
}])
config
.plugin('dll')
.use(webpack.DllReferencePlugin, [{
manifest: require("./dll/vue-manifest.json")
}])
}
}
//package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --modern",
"lint": "vue-cli-service lint",
"dll": "webpack --color --config ./webpack.dll.js"
},
...
}
//webpack.dll.js
const path = require("path");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
mode: 'production',
entry: {
vue: ["vue/dist/vue.runtime.esm.js", "vue-router", "vuex"]//不能直接在客户端使用npm install之后的vue
},
output: {
path: path.resolve(__dirname, "./dll"),
filename: "[name]-[chunkhash:5].dll.js",
library: "[name]"
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DllPlugin({
path: path.resolve(__dirname, "./dll", "[name]-manifest.json"),
name: "[name]"
})
]
};
