凱開 x 慵懶日子

安裝

不想手動裝webpack,可以直接安裝Vue Cli

不用往下看惹XDD

---

我先前有先裝好webpack & webpack-dev-server

【前端】webpack & webpack-dev-server  點擊他

Vue loader

vue loader 是一個 webpack 的 loader,允許.vue文件

每個.vue 包含 <template>、<script> 和 <style>

更多的loaders,https://webpack.js.org/loaders/

安裝vue-loader和相關loader

1. npm install -D vue vue-loader vue-template-compiler

在webpack.config.js添加vue loader的插件

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
 mode: 'development',
 module: {
 rules: [
 {
 test: /\.vue/,
 loader: 'vue-loader'
 },
 ]
 },
 plugins: [
 new VueLoaderPlugin()
 ]
}

2. npm install -D file-loader url-loader

處理資料路徑 ex. jpg、png的路徑

3. npm install -D css-loader vue-style-loader

應用 .css 文件以及 .vue 文件中的 style 區塊

{
 test: /\.css/,
 use: [
 'vue-style-loader',
 'css-loader'
 ]
}

4. npm install -D babel-core babel-loader

應用 .js 文件以及 .vue 文件中的 script 區塊

{
 test: /\.js/,
 loader: 'babel-loader',
 exclude: file => (
 /node_modules/.test(file) &&
 !/\.vue\.js/.test(file)
 )
}