簡單配置webpack4 vue

1.建立webpack4-vue資料夾

mkdir webpack4-vue && cd webpack4-vue

2.初始化npm

npm init -y

3.安裝相關依賴

npm i -d webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler html-webpack-plugin

index.js

import vue from

'vue'//
引入vue''
//const root = document.createelement('
div'); //
根節點new
vue().$mount(root)

}

5.在根目錄下建立webpack.config.js檔案

const path = require('

path');
const  = require('
vue-loader');
const webpack = require('
webpack');
const htmlwebpackplugin = require('
html-webpack-plugin')
module.exports =,
module: ]},
plugins: [
newvueloaderplugin(),
newhtmlwebpackplugin(),
newwebpack.hotmodulereplacementplugin(),
],devserver: 
}

對於[email protected]版本，需要在webpack.config.js中新增 const = require('vue-loader')，否則不起作用

6.修改package.json檔案

"

scripts
": ,

7.執行 npm run dev，enjoy it

參考：

webpack 簡單配置

const extracttextplugin require extract text webpack plugin 打包的css拆分,將一部分抽離出來 const webpack require webpack 引入的webpack,使用lodash const htmlwebpackplugi...

vue簡單學習 webpack

本地安裝 3.2.1 js檔案之間的匯出和匯入方式 方式1 a.js import from b 測試 let sum util2.sum alert sum 2 b.js export const util 方式2 a.js import from b 測試 let sum util2.sum a...

webpack4配置詳解

方式一 單檔案寫法 entry 方式二 多檔案寫法 entry output 常用的有三種 模板描述 hash模組識別符號的hash,一般應用於filename name hash js chunkhash按需載入塊內容的hash，根據chunk自身的內容計算而來,js name chunkhash...