使用 webpack 4 配置 Vue.js 項目
1、Webpack 4 的基本安裝
執行控制檯命令的兩個方法：
方法一：在 Windows資源管理器中建立並進入文件夾後，按鍵盤 Shift + 鼠標右鍵，選擇
「在此處打開 PowerShell 窗口」（Win 10）或 「在此處打開命令窗口」（Win 7），便可在
打開的窗口執行命令
方法二：在 Windows資源管理器中建立文件夾，啓動 WebStorm後打開該文件夾，點窗口左
下方的 Terminal(中文意思 是終端，用來執行命令的)，便可執行命令。
一、建立項目文件：webpack-demo
mkdir webpack-demo
cd webpack-demo
二、NPM 初始化項目package.json，進入項目文件夾，並在命令提示符下執行命令：
npm init
或者所有使用默認值：
npm init -y
三、在本地安裝 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
四、在項目中建立index.html、文件夾 ./src 和 JS 文件 ./src/index.js，以下：
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
編輯文件 src/index.js
console.log("Hello World!");
五、打包 js 文件，執行構建命令：
D:\webpack-demo>npx webpack
屏幕輸出相似以下信息：
Hash: de6f43f472db75a3678e
Version: webpack 4.21.0
Time: 360ms
Built at: 2018-10-21 15:41:12
Asset Size Chunks Chunk Names
main.js 957 bytes 0 [emitted] main
Entrypoint main = main.js [0] ./src/index.js 28 bytes {0} [built]
命令執行成功後在，在項目中會添加一個 dist文件夾，以及 dist/mian.js 文件
六、編輯index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack 4 demo</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
保存，用瀏覽器打開該文件，F12 打開瀏覽器控制檯檢查是否有輸出結果。
使用一個配置文件
在 webpack 4 中，能夠無須任何配置使用，默認的入口是 src/index.js，默認的出
口是：dist/main.js，然而大多數項目會須要很複雜的設置，這就是爲何 webpack 仍然
要支持 配置文件。這比在終端(terminal)中手動輸入大量命令要高效的多，因此讓咱們創
建一個 webpack.config.js 取代以上使用 CLI 選項方式的配置文件，內容以下所示：
path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
使用 NPM 腳本執行構建命令
考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便，咱們能夠設置一個快捷方
式。在 package.json 添加一個 npm 腳本(npm script)：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" // 添加這一行
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2"
}
}
如今，可使用 npm run build 命令，來替代咱們以前使用的 npx 命令。
D:\webpack-demo>npm run build
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
Hash: 49dbf2f0376708b5b0d8
Version: webpack 4.21.0
Time: 102ms
Built at: 2018-10-21 15:54:47
Asset Size Chunks Chunk Names
main.js 957 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]
2、最小的 Vue.js 配置
一、安裝生產階段依賴模塊和開發階段依賴模塊
npm install --save vue
二、修改webpack.config.js 文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: [
'.js'
],
alias: {
vue: 'vue/dist/vue.js'
} }
};
三、修改index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="dist/main.js"></script>
</body>
</html>
四、修改index.js文件
import Vue from 'vue';
var vue = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
});
六、執行構建命令: npm run build
D:\webpack-demo>npm run build
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
Hash: 0d271c85cebc3d506967
Version: webpack 4.21.0
Time: 2740ms
Built at: 2018-10-21 16:25:18
Asset Size Chunks Chunk Names
main.js 109 KiB 0 [emitted] main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./src/index.js 121 bytes {0} [built]
+ 4 hidden modules
七、在瀏覽器打開index.html 文件，檢查運行結果 3、單文件組件與 vue-loader
一、安裝開發階段的依賴(使用Babel 6)
npm install --save-dev vue-loader vue-template-compiler babel-core
babel-loader babel-preset-env
npm install --save-dev @babel/core @babel/cli @babel/preset-env
安裝 polyfill（生產階段依賴，用於對 IE 瀏覽器等提供 ES2015+ 環境的支持）
npm install --save @babel/polyfill
安裝後，package.json 文件內容如如下所示：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/polyfill": "^7.0.0",
"vue": "^2.5.17"
}
}
二、在項目中添加文件 .babelrc，內容以下：
{
"presets": [
[
"env", {
"targets": {
"browsers": ["last 2 versions", "IE 11"]
},
"modules": false,
"useBuiltIns": true
}
]
]
}
三、修改webpack.config.js 文件，內容以下所示：
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
// 模塊
module: {
rules: [
{
test:/\.vue$/,
use:[
{
loader: "vue-loader",
},
]
},
{
/* 用 babel來解析 js文件並把 es6 的語法轉換成瀏覽器認識的語法
*/
test:/\.js$/,
/* 排除模塊安裝目錄的文件 */
exclude:/node_modules/,
use:[
{
loader:'babel-loader',
},
]
}
] },
resolve: {
modules:[path.join(__dirname,'src'),'node_modules'],
extensions: [
'.js','.vue'
],
//給vue 配置別名，import 引入不用寫易長串
alias: {
// vue: 'vue/dist/vue.js'
'vue$':'vue/dist/vue.esm.js'
}
},
//插件，用於生產模板和各項功能
plugins: [
new VueLoaderPlugin()
],
};
四、修改 index.html，內容如如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
Loading...
</div>
<script src="dist/main.js"></script>
</body>
</html>
五、修改./src/index.js 文件如如下內容：
import Vue from 'vue';
import App from './app.vue';
var vue = new Vue({
el: '#app',
render: h => h(App)
});
六、添加單文件組件文件./src/app.vue，src 文件夾上右鍵 -> new -> Vue Component,
內容如如下所示：
<template>
<div id="app"> {{msg}}
</div>
</template>
<script>
export default {
name: "app",
data:function () {
return{
msg:'welcome to your vue.js App'
}
}
}
</script>
<style scoped>
</style>
七、執行構建命令：npm run build
D:\webpack-demo>npm run build
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
Hash: c23b2f56ea24497d680a
Version: webpack 4.21.0
Time: 1482ms
Built at: 2018-10-21 18:13:39
Asset Size Chunks Chunk Names
main.js 91.5 KiB 0 [emitted] main
Entrypoint main = main.js
[0] ./node_modules/vue-loader/lib??vue-loader-
options!./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang
=css& 19 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[6] ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=css
& 312 bytes {0} [built]
[7] ./src/index.js + 6 modules 4.86 KiB {0} [built]
| ./src/index.js 143 bytes [built]
| ./src/app.vue 1.14 KiB [built]
| ./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 207 bytes
[built]
| ./src/app.vue?vue&type=script&lang=js& 332 bytes [built]
| ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-
loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template
&id=5ef48958&scoped=true& 291 bytes [built]
| ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-
loader-options!./src/app.vue?vue&type=script&lang=js& 142 bytes [built]
| + 1 hidden module
+ 4 hidden modules
八、在瀏覽器中運行index.html 文件，檢查結果。
4、使用 webpack-dev-server構建本地服務器
一、安裝webpack-dev-server、html-webpack-plugin 到開發階段依賴
npm install --save-dev webpack-dev-server html-webpack-plugin
二、修改webpack.config.js 文件
在開頭添加webpack 和 html-webpack-plugin 引用
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
在 module.exports內添加如下兩個小節
//插件，用於生產模板和各項功能
plugins: [
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: 'index.html',
inject: true,
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress:true,
historyApiFallback: true,
inline: true,
hot: true
},
三、修改package.json 文件，在"scripts"小節內添加 "start" 行，以下所示
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development",
"start": "webpack-dev-server --inline" // 添加這一行
},
四、在命令提示符或WebStorm 的終端中輸入如下命令便可啓動本地調試服務器：
npm run start
D:\webpack-demo>npm run start
> webpack-demo@1.0.0 start D:\webpack-demo
> webpack-dev-server --inline
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\webpack-demo\dist
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: Hash: 65e7921c6a791f244a0f
Version: webpack 4.21.0
Time: 2300ms
Built at: 2018-10-24 20:44:57
Asset Size Chunks Chunk Names
main.js 1010 KiB main [emitted] main
0.main.js 17.4 KiB 0 [emitted]
index.html 271 bytes [emitted]
本地調試服務器啓動後，在瀏覽器的地址欄輸入：http://localhost:8080/，便可查看項
目運行的結果，同時服務器會監控各個頁面的修改並反饋到網頁中。
5、在 Vue.js中使用Bootstrap(這裏只使用 CSS)進行
一、添加Bootstrap 4 到生產階段依賴
npm install bootstrap -S
二、安裝處理CSS的加載器到開發階段依賴
npm i style-loader css-loader -D
三、修改webpack.config.js 文件，在module 的rules小節中添加如下內容：
{
test:/\.css$/,
use:['style-loader','css-loader'],
}
四、在入口的index.js 文件中添加css 的引用
import Vue from 'vue';
import App from './app';
import 'bootstrap/dist/css/bootstrap.css'; // 添加樣式文件的引用
Vue.config.productionTip = false; // 做用是阻止 vue 在啓動時生成生產提示 var vue = new Vue({
el: '#app',
render: h => h(App)
}).$mount('#app');
完成以上設置後，便可使用 bootstrap 樣式了。
6、使用前端路由vue-router
一、安裝vue-router 到生產階段依賴
npm install vue-router -S
二、在src文件夾中新建 component 文件夾，
三、在component文件夾中添加單文件組件home.vue，內容以下所示：
<template>
<div>This is home vue</div>
</template>
<script>
export default {
name: "home"
}
</script>
<style scoped>
</style>
四、在component文件夾中添加單文件組件about.vue，內容以下所示
<template>
<div>關於頁面。</div>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped>
</style>
五、添加路由信息文件src/router.js，內容如如下所示：
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';
Vue.use(Router);
export default new Router({
base: process.env.BASE_URL,
// 下面這個單詞要注意，是 routes（沒有 r）, 不是 routers
routes: [
{path: '/', name: 'home', component: Home},
{path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)}
]
});
六、修改src/index.js 文件，
import Vue from 'vue';
import App from './app';
import router from 'router' // 導入上一步的路由信息
import 'bootstrap/dist/css/bootstrap.css';
Vue.config.productionTip = false; // 做用是阻止 vue 在啓動時生成生產提示
var vue = new Vue({
el: '#app',
router: router, // 指定路由
render: h => h(App)
}).$mount('#app');
七、修改app.vue 文件，如如下內容所示：
<template>
<div id="app" class="container">
<div class="row">
<div id="nav" class="col-3">
<ul>
<li>
<router-link to='/'>Home</router-link>
</li>
<li>
<router-link to='/about'>About</router-link>
</li>
</ul>
</div>
<div class="col-9">
<router-view/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "app",
}
</script>
<style scoped>
</style>
八、啓動本地調試服務器
npm run start
九、在瀏覽器中輸入地址：http://localhost:8080，查看運行結果
說明:
一、使用vue-router 的時候須要webpack-dev-server 的支持，否則地址欄沒法進行路由
的匹配；
二、vue-router默認的路由會在地址欄中顯示有一個 # 的符號，這個是由於使用的是hash
mode，若是要去掉#/，改爲 history模式就能夠了，具體配置在router 中添加一行 mode:
'history', 以下：
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';
Vue.use(Router);
export default new Router({
mode: 'history', // history 模式
base: process.env.BASE_URL,
// 下面這個單詞要注意，是 routes（沒有 r）, 不是 routers
routes: [
{path: '/', name: 'home', component: Home},
{path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)} ]
});
css
- 1. 配置vue.js項目環境（vue-cli、webpack）
- 2. 使用 webpack 4 和 Babel 7 配置 Vue.js 工程模板
- 3. 使用webpack 配置Vue項目
- 4. express+webpack+vue.js項目搭建
- 5. vue.js仿餓了麼app---webpack配置項
- 6. webpack+vue.js構建項目
- 7. Vue.js 第5章 webpack配置
- 8. Vue.js建立Webpack項目
- 9. webpack入門配置-及在項目中使用webpack
- 10. webpack 項目配置細節
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Eclipse Debug 配置 - Eclipse 教程
- • Composer 安裝與使用
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
-
每一个你不满意的现在，都有一个你没有努力的曾经。