webpack 筆記

建立時間: 2016-10-31 18:24:04
更新時間: 2016-10-31 18:24:04

在method中使用es6

假設使用的副檔名是.babel

 

先安裝babel-runtime這個套件

 npm install babel-runtime --save-dev

 

然後修改webpack.base.conf.js

將babel加入loader中

這樣build的時候才不會出錯

 {
     test: /\.babel$/,
     loader: 'babel',
     exclude: /node_modules/
 }

 

ckeditor安裝

由於我是使用客製化的ckeditor

所以將ckeditor解壓縮放在vue-cli webpack project的static資料夾中

 

接著安裝一個叫scriptjs的npm套件

 yarn add scriptjs

 

安裝好後只要在scriptjs內

就能跟一般使用的方式一樣

 import $s from 'scriptjs'
 $s('static/ckeditor/ckeditor.js', function(){
 	CKEDITOR.replace('editor1')
 })

 

git page的base url問題及解決

會遇到這個問題

是因為在webpack打包後

index.htm中的assets預設路徑都是網站根目錄

所以打包後可能會有個js是長這樣

 <script type=text/javascript src=/static/js/some.js>

 

但是git page的URL是長這樣username.github.io/repo-name

所以其實正確的js位置應該是長這樣才對

 <script type=text/javascript src=/repo-name/static/js/some.js>

 

結果出來的index.html就完全抓不到js跟css

 

解決方法

設定config資料夾中的index.js

把原本的assetsPublicPath: '/'

改成assetsPublicPath: '/repo-name/'

這樣出來的路徑就沒問題了