請(qǐng)教一下，
import babelpolyfill from 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//import './assets/theme/theme-green/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
//import NProgress from 'nprogress'
//import 'nprogress/nprogress.css'
import routes from './routes'
//import Mock from './mock'
//Mock.bootstrap();
import 'font-awesome/css/font-awesome.min.css'
像是這種公共的js文件， 怎麼用cdn引用進(jìn)來(lái)呢。目前是npm install 安裝的， 都在本地， 出口有限，很多包都是可以用cdn引入的。但目前都是vue框架操作的，沒(méi)有直接從html引進(jìn)的寫(xiě)好的地方。請(qǐng)問(wèn)像https://cdn.bootcss.com/eleme... 這種公共cdn要怎麼使用到專(zhuān)案中呢。
5
0
0
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
externals: {
jquery: 'jQuery.noConflict()', //或者jquery:'jQuery',
$: 'jQuery.noConflict()'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
}webpack這樣配置, html引入cdn的jquery
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>lawyer_fe</title>
<link rel="stylesheet" type="text/css" href="/static/normalize.css">
<link rel="stylesheet" type="text/css" href="/static/cssreset.css">
<link rel="stylesheet" type="text/css" >
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
就直接在 html 裡 從 CDN 引入，沒(méi)必要 引進(jìn)來(lái)一起打包/壓縮了
第三方的函式庫(kù)有cdn位址的，那就可以直接html中引入了，在template的html中。
然後你也可以把程式碼丟到你自己的cdn上，統(tǒng)一管理，跟你的其他靜態(tài)檔案同樣的處理方式，例如你的img檔案都放到cdnUrl+projectName/img/ 這些第三方函式庫(kù)也丟上去。
你現(xiàn)在本地是npm套件管理的，那你引用的時(shí)候如果是import進(jìn)來(lái)的，一定會(huì)被webpack打包的... 這就涉及到webpack的問(wèn)題了。還是先看看能不能解決現(xiàn)在的問(wèn)題吧
可以看一下webpack的文檔，文檔上面有寫(xiě)，還蠻詳細(xì)的，以jQuery為例
https://doc.webpack-china.org...
解決你的問(wèn)題需要以下幾個(gè)步驟
1、提取本地由npm安裝，透過(guò)import引入的js文件，這部分可以透過(guò)CommonsChunkPlugin外掛程式進(jìn)行提取參考webpack程式碼分離
例如：
entry: {
main:['./src/index.js'],
vue:['vue'],
jquery:['jquery']
}
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['vue','jquery'], // 指定公共 bundle 的名字。
minChunks: function(module){
return module.context && module.context.indexOf("node_modules") !== -1;
}
})
]2、利用HtmlWebpackPlugin解決js打包之後的路徑與檔名問(wèn)題
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',//模板路徑
inject: true,
hash:true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
})
]以上資源路徑配置在output項(xiàng)// webpack.config.js
output: {
...
publicPath: debug ? 'build/' : 'https://cdn.bootcss.com/element-ui'
}最終生成效果是這樣
// 生產(chǎn)環(huán)境
// a.html
<script src="https://cdn.bootcss.com/element-ui/js/460de4b8.vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/js/e7d20340.a.min.js"></script>你的問(wèn)題主要在於以上公共js檔案的提取，至於提取出來(lái)後，採(cǎi)用HtmlWebpackPlugin自動(dòng)添加資源路徑還是手動(dòng)添加就是個(gè)人選擇了，所以重點(diǎn)是第一步
