從零開始搭建一個(gè)簡(jiǎn)單的基于webpack的vue開發(fā)環(huán)境
注：基于webpack3.X的版本，webpack4.X的版本不適用
參考鏈接：
https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
我的github：
https://github.com/meilulan/webpack-vue-practice
[TOC]
總結(jié)
_summary.png
項(xiàng)目初始化
1. 安裝node.js
2. 創(chuàng)建項(xiàng)目目錄并npm初始化
1. 新建“webpack-vue-practice”文件夾
2. 初始化并獲取package.json文件
cd webpack-vue-practice
npm init -y
“-y”表示將項(xiàng)目設(shè)置默認(rèn)，以后可在package.json中更改
3. 引入webpack
1. 在項(xiàng)目中安裝webpack、vue等相關(guān)插件
npm install --save-dev webpack@3 webpack-dev-server@2
npm i --save-dev vue
2. 在項(xiàng)目根目錄下新建“index.html”文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于webpack3.X的vue開發(fā)環(huán)境</title>
</head>
<body>
</body>
</html>
3. 在項(xiàng)目根目錄下新建“webpack.config.js”配置文件
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
}
4. 在項(xiàng)目根目錄下新建“src"文件夾，并在/src下新建“main.js”入口文件
到目前為止篷帅，項(xiàng)目目錄的整體結(jié)構(gòu)如下：
webpack-vue-practice01.png
5. 在/src文件夾下新建測(cè)試js文件“util.js”
util.js
export default function say() {
console.log("hello webpack!!");
}
6. 在main.js文件中引入util.js文件
main.js
import say from './util';
say();
配置
1. 配置webpack.config.js文件
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/main.js',//項(xiàng)目的入口文件
output: {
path: path.resolve(__dirname, './dist'),//項(xiàng)目的打包文件目錄
publicPath: '/dist/',//通過(guò)devServer訪問(wèn)路徑
filename: 'index.js'//打包后的文件名
},
devServer: {
historyApiFallback: true,//如果找不到界面就返回默認(rèn)首頁(yè)index.html
overlay: true//可以在瀏覽器打開的頁(yè)面顯示終端編譯時(shí)產(chǎn)生的錯(cuò)誤
}
}
2. 配置package.json文件中的"scripts"對(duì)象
package.json
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "webpack --progress --hide-modules"
},
3. 修改index.html，引入打包后的文件
index.html
<body>
<script src="/dist/build.js"></script>
</body>
4. 運(yùn)行項(xiàng)目
npm run dev
可以發(fā)現(xiàn)瀏覽器自動(dòng)打開了一個(gè)窗口，在瀏覽器的控制臺(tái)里輸出"hello webpack"
并且可以發(fā)現(xiàn)左胞，我們隨意修改util.js的文件，瀏覽器會(huì)自動(dòng)刷新
5. 打包項(xiàng)目
npm run build
可以發(fā)現(xiàn)举户，在項(xiàng)目中自動(dòng)新建了“/dist/build.js”的路徑和文件
引入vue
1. 在main.js文件中引入vue烤宙，并在入口文件index.html中調(diào)用vue
main.js
import Vue from 'vue';
const vue = new Vue({
el: "#app",
data: {
message:"hello webpack-vue"
}
});
index.html
<div id="app">{{message}}</div>
2. 在webpack.config.js文件中的配置解析vue模塊的引用
resolve: {//幫組webpack找到bundle中需要引入的模塊代碼，這些代碼包含在每個(gè)require/import語(yǔ)句中
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
webpack.config.js文件的整體配置如下：
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/main.js',//項(xiàng)目的入口文件
output: {
path: path.resolve(__dirname, './dist'),//項(xiàng)目的打包文件目錄
publicPath: '/dist/',//通過(guò)devServer訪問(wèn)路徑
filename: 'build.js'//打包后的文件名
},
devServer: {
historyApiFallback: true,//如果找不到界面就返回默認(rèn)首頁(yè)index.html
overlay: true//可以在瀏覽器打開的頁(yè)面顯示終端編譯時(shí)產(chǎn)生的錯(cuò)誤
},
resolve: {//幫組webpack找到bundle中需要引入的模塊代碼俭嘁，這些代碼包含在每個(gè)require/import語(yǔ)句中
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
引入scss和css
注：webpack默認(rèn)只支持js的模塊化躺枕，如需其他格式的文件當(dāng)成模塊引入，需要用到webpack的loader解析器
1. 在項(xiàng)目中安裝css
終端
npm install --save-dev css-loader vue-style-loader
2. 在項(xiàng)目中安裝scss
終端
npm install --save-dev node-sass sass-loader
3. 在webpack.config.js的modules中配置css和sass
module: {
rules: [
//css
{
test: /\.css$/,
use: [
"vue-style-loader",
"css-loader"
]
},
//scss為擴(kuò)展名的sass
{
test: /\.scss$/,
use: [
"vue-style-loader",
"css-loader",
"sass-loader"
]
},
//sass為擴(kuò)展名的sass
{
test: /\.sass$/,
use: [
"vue-style-loader",
"css-loader",
"sass-loader"
]
}
]
}
4. 我們做個(gè)測(cè)試
在src目錄下供填，新建“assets”目錄拐云，并在其下新建common.scss文件，寫入以下樣式
common.scss
body {
color: rgb(0, 128, 0);
}
啟動(dòng)后近她，可以看到瀏覽器中的文字顏色已改變叉瘩，說(shuō)明scss文件已經(jīng)起作用了
使用babel轉(zhuǎn)碼
有些瀏覽器不是很支持ES6的語(yǔ)法，我們可以使用babelES6轉(zhuǎn)換為ES5語(yǔ)法粘捎。
1. 在項(xiàng)目中安裝babel
npm install --save-dev babel-loader @babel/core @babel/preset-env
2. 在webpack.config.js的module中配置babel
module: {
rules: [
//babel
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
exclude：是指不需要使用的文件或目錄薇缅，相對(duì)應(yīng)的是include（手動(dòng)指定哪些文件或目錄）
3. 在項(xiàng)目根目錄下創(chuàng)建babel的配置文件.babelrc
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
"browsers": [
">0.25%",
"not op_mini all"
]
}
}
]
]
}
babel的配置具體見(jiàn)babel官網(wǎng)
4. 引入@babel/plugin-transform-runtime
因?yàn)閎abel-core只是對(duì)新引入的語(yǔ)法進(jìn)行轉(zhuǎn)換，比如箭頭函數(shù)攒磨、塊級(jí)作用域等
但對(duì)新引入的對(duì)象泳桦，例如Promise、Set等這些只能使用babel的插件：@babel/plugin-transform-runtime
在項(xiàng)目開發(fā)環(huán)境中引入@babel/plugin-transform-runtime娩缰，同時(shí)在生產(chǎn)環(huán)境引入@babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
在.babelrc配置文件中引入plugin
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
.babelrc文件內(nèi)容整體如下：
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": {
// The % refers to the global coverage of users from browserslist
"browsers": [
">0.25%",
"not op_mini all"
]
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
具體操作和解釋灸撰，請(qǐng)查看 npm 和 babel 官網(wǎng)
引入圖片資源
1. 安裝文件模塊
npm install --save-dev file-loader
2. 在webpack.config.js的module中引入文件模塊
module: {
rules: [
//圖片
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
}
3. 測(cè)試
1. 在項(xiàng)目的src目錄下，新建img目錄，并引入圖片example.png
webpack-vue-practice02.png
2. 在項(xiàng)目中引用圖片
main.js
Vue.component('my-pic', {
template: '<img :src="url" />',
data() {
return {
url: require('./img/example.png')
}
}
});
index.html
<div id="app">
<p>{{message}}</p>
<my-pic></my-pic>
</div>
運(yùn)行項(xiàng)目就能看到該圖片了浮毯。
引入vue的單文件組件
在前面完疫，我們使用了Vue.component來(lái)定義全局的組件
但在實(shí)際項(xiàng)目中，更推薦使用單文件組件
1. 安裝單文件組件相關(guān)的插件
npm install --save-dev vue-loader vue-template-compiler
2. 在webpack.config.js的module和plugins中引用
webpack.config.js
const vueLoaderPlugin = require('vue-loader/lib/plugin');
module:{
rules:[
//vue單文件組件
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
'scss':[
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass':[
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
}
}
]
},
plugins:[
new vueLoaderPlugin(),
]
3. 在src目錄下新建App.vue文件
App.vue
<template>
<div id="app">
<h1>{{msg}}</h1>
<img src="./img/example.png" />
<input type="text" v-model="msg" />
</div>
</template>
<script>
import say from "./util";
export default {
name: "app",
data() {
return {
msg: "the first vue page"
};
},
created() {
this.getSay();
},
methods: {
async getSay() {
let what = await say();
this.msg = what;
}
}
};
</script>
<style lang="scss">
#app {
h1 {
color: red;
}
}
</style>
4. 修改main.js文件
main.js
import Vue from 'vue';
import App from './App.vue'
import './assets/common.scss';
const vue = new Vue({
el: "#app",
components: { App },
template: '<App/>'
});
5. 修改index.html文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基于webpack3.X的vue開發(fā)環(huán)境</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
運(yùn)行項(xiàng)目亲轨，即可看到頁(yè)面能正確顯示趋惨。
