這篇要講webpack.config.js。
在那之前，我們先來把裡面會用到的東西都裝一裝。
本篇大綱
- index.html
- router.js
- loader / plugin 是甚麼
- 配置webpack.config.js
首先先做個很簡單很簡單的範例，
這邊注意倒數第三行的
<script src="./dist/bundle.js"></script>
這裡的src寫的是我打包後檔案的路徑。
dist是預設的存放打包檔案的資料夾，在webpack.config.js中設定。
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js v2</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>
router.js
建立 src 目錄與 src/router/router.js 檔案
src是前端部分會用到的檔案，
只是一個專案上使用的習慣，可依個人習慣配置。
這邊的message就是剛剛index.html的那個message啦
// router.js
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: "Hello Vue"
}
})
到此為止，專案會長這個樣：
demo
|__node_modules
|__src
| |__router
| |__router.js
|__index.html
|__package-lock.json
|__package.json
loader與plugin
由於webpack本身只能處理JavaScript模塊，
所以如果專案中有其他類型的文件，就需要使用loader來進行轉換。
loader能夠加載資源文件，對這些文件進行處理，
例如編譯，壓縮。
最終一起打包到指定文件中。
在webpack運行的生命週期中會有很多事件，
plugin可以監聽這些事件，
在合適的時機通過webpack提供的API更改輸出結果。
loader們
npm i webpack webpack-dev-server css-loader style-loader file-loader url-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 vue-loader vue-template-compiler --save
簡單說明
webpack-dev-server 用本機當作server
css-loader style-loader 是css們需要的
file-loader url-loader主要是處理圖片
babel系列 基本上類似翻譯，因為ES6以上的語法很多都還是瀏覽器不認識的，babel負責轉譯
vue系列是for .vue檔案
配置webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var path = require('path')
var config = {
mode: "development",
entry: path.join(__dirname, 'src/router', 'router'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './'
},
module: {
rules: [
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{test: /\.vue$/, loader: 'vue-loader'},
{test: /\.css$/, loader: ["style-loader", "css-loader"] },
{test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'file-loader' ,options:{name: 'image/[name].[ext]'}},
],
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue: 'vue/dist/vue.js',
node_modules :__dirname + '/node_modules'
}
},
plugins: [
new VueLoaderPlugin()
]
}
module.exports = config
配置文件使用Node內建的 path module，
並以__dirname前綴作為全域的前綴。
=> 防止操作系統之間出現文件路徑問題，
並允許相對路徑按預期工作。
「相對路徑」就是相對於現在目錄的路徑表示法，因此「相對路徑」所指到的檔案或目錄，會隨著現在目錄的不同而改變，絕對路徑不會。
path.join()的作用是做路徑字串拼接時, 減少出錯機率
output的path放打包檔案要放的位置(絕對路徑)
publicPath放你(打包完的)html頁在dist的位置(相對路徑)
打包後他會幫你把所有使用到的相對路徑都替換成這個路徑
resolve模組可以設定alias(別名)
在 import 模組時可以直接使用別名載入
ex.
router.js中的
import Vue from 'vue'
設定extensions
import時可以不用寫副檔名
設定alias
當文件中出現import ‘vue’ 這種不是相對、也不是絕對路徑的寫法時，
這個設定會去alias之中尋找，
可減少搜尋範圍
設定 .babelrc
// 直接放在根目錄底下即可
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
做完以上基本配置，我們來新增一個元件！
app.vue
新增src/views資料夾(只是個習慣)
在下面建立一個 app.vue 檔案(example)
<!--src/views/app.vue--> <template> <div> <div style="color: pink;" > {{ message }} </div> </div></template> <script> export default { data () { return { message: 'Helo, Vue.js 2.0' } } } </script>
修改index.html，加入app元件
<!-- 修改 index.html ，加入 <app> -->
<body>
<div id="app">
<app></app>
</div>
<script src="./dist/bundle.js"></script>
</body>
在 router.js 把元件 app.vue 加入 components
import Vue from 'vue'
import App from '../views/app.vue'
new Vue({
el: '#app',
components: { App }
})
到這邊，專案目錄會長得像是這樣：
demo
|__node_modules
|__src
| |__router
| | |__router.js
| |__views
| |__app.vue
|__.babelrc
|__index.html
|__package-lock.json
|__package.json
|__webpack.config.js
然後試試npm run build~
接著會詢問要不要裝webpack cli
Yes即可
然後基本上你就會成功了~~~
可以開一下index.html看看結果。
應該會看到像是這樣的字樣
Hello, Vue.js 2.0
沒成功的話...
去問google吧...
參考資料
Node.js 中的 __dirname、__filename，以及使用相對路徑產生的問題