webpack4+vue+vuex+vue-router 搭建vue開發(fā)環(huán)境

記錄一下自己使用 webpack4 搭建vue環(huán)境的步驟帐萎，僅供參考耸别。

一捐晶、創(chuàng)建目錄

1.創(chuàng)建項(xiàng)目目錄并且初始化項(xiàng)目

mkdir Webpack-Vue
cd Webpack-Vue
npm init -y
  1. 創(chuàng)建項(xiàng)目內(nèi)子目錄
mkdir src src/components dist

dist 用于存放 Webpack 打包后的項(xiàng)目文件伸刃、src 用于存放源代碼文件

  1. 創(chuàng)建入口文件
touch src/main.js
touch src/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>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

二拢军、安裝webpack

npm i webpack webpack-dev-server webpack-cli webpack-merge -D

三屯吊、配置webpack

npm i terser-webpack-plugin@4.1.0 html-webpack-plugin@3.2.0 -D

創(chuàng)建如下文件送巡，用來配置webpack


touch webpack.config.js webpack.dev.js webpack.prod.js

接下來編寫配置文件

  1. webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 輸入
  entry: {
    bundle: path.resolve(__dirname, './src/main.js')
  },
  // 輸出
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash].js'
  },
  module: {
    rules: []
  },
  resolve: {
    alias: {},
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html'),
      filename: "index.html",
      title: 'webpack-vue',
      minify: {// 壓縮HTML文件
        removeComments: true, // 移除HTML中的注釋
        collapseWhitespace: true, // 刪除空白符與換行符
        minifyCSS: true// 壓縮內(nèi)聯(lián)css
      }
    }),
  ]
}
  1. webpack.dev.js
const path = require('path');
const webpackMerge = require('webpack-merge');
const webpackConfig = require('./webpack.config');

module.exports = webpackMerge(webpackConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    open: true,
    compress: true,
    host: "0.0.0.0",
    port: 8080
  }
})
  1. webpack.prod.js
const webpackMerge = require('webpack-merge');
const webpackConfig = require('./webpack.config');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = webpackMerge(webpackConfig, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      test: /\.js(\?.*)?$/i,
    })],
  },
})
  1. 編寫package.json scripts 腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.config.js"
  },

控制臺運(yùn)行：

npm run start

四、 安裝 Vue及Vue-router：

  1. 安裝vue
npm i vue --save

修改 main.js 文件:

import Vue from 'vue';
import App from './App';
new Vue({
  el:'#app',
  template:'<App/>',
  components: { App }
});

同級目錄下創(chuàng)建一個(gè) App.vue 文件

<template>
  <h1>Hello World!</h1>
</template>
<script>
  export default {
    name: 'App'
  }
</script>
<style>
  html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 16px;
  }

</style>
  1. 添加vue-router

首先控制臺安裝vue-router依賴包：

npm install vue-router --save

在src目錄下創(chuàng)建router文件夾并在此文件夾下創(chuàng)建index.js文件：

mkdir src/router && touch src/router/index.js

在router/index.js中編寫如下代碼：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 組件
import Home from '../components/home/Home.vue'
Vue.use(VueRouter)
export default new VueRouter({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }]
})

創(chuàng)建Home組件：

mkdir src/components/home && touch src/components/home/Home.vue

home組件中添加代碼：

<template>
  <div class="Home">
    homePage
  </div>
</template>
<script>
  export default {
    name: 'home',
    data() {
      return {}
    },
  }
</script>
<style lang="less">
</style>

在main.js中修改代碼：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.debug = true;//開啟錯(cuò)誤提示

//系統(tǒng)錯(cuò)誤捕獲
const errorHandler = (error, vm) => {
  console.error('全局異常：', error);
  Activity.saveLog('全局異常：', error)
}
Vue.config.errorHandler = errorHandler;

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

在App.vue中修改代碼：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>
<style>
html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 16px;
}
</style>

五盒卸、引入各種loader

  1. babel-loader

為了使 JavaScript 代碼兼容更多環(huán)境骗爆，需要使用 babel-loader。

配置方法：

安裝 babel-loader蔽介、babel-preset-env 和 babel-core摘投。 babel-loader 是 7.x 版本的話，babel-core 必須是 6.x 版本虹蓄； babel-loader 是 8.x 版本的話犀呼， babel-core 必須是 7.x 版本。

安裝命令如下：

npm i babel-loader@7 babel-core babel-preset-env -D

然后在 webpack.config.js 的 module.rules 中新增


{
  test: /\.js$/,
  use:'babel-loader',
  exclude: /node_modules/
}

添加一個(gè)配置文件（.babelrc）在根目錄下：


{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}
  1. file-loader

這個(gè)用于將字體文件薇组、圖片文件進(jìn)行模塊化外臂。首先安裝 file-loader：

npm i file-loader -D

在 webpack.base.conf.js 中配置module.rules：

{

  test: /\.(png|svg|jpg|gif)$/,
  use: [
  'file-loader'
  ]
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: [
  'file-loader'
  ]
}
  1. vue-loader

安裝 vue-loader、css-loader体箕、vue-style-loader 和 vue-template-compiler


npm i vue-loader css-loader vue-style-loader vue-template-compiler -D

配置 webpack.base.conf.js

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

在頭部引入：

const VueLoaderPlugin = require('vue-loader/lib/plugin');

在 plugins 數(shù)組中添加這個(gè)插件

new VueLoaderPlugin(),

配置別名专钉，將 resolve.alias 配置:

{
  'vue$':'vue/dist/vue.esm.js',
  '@': path.resolve(__dirname,'../src'),
}

添加一個(gè) resolve.extensions 屬性:

extensions: ['*', '.js', '.json', '.vue'],
  1. babel-preset-stage-3
    安裝：
npm isntall --save-dev  babel-preset-stage-3

修改.babelrc配置，在presets添加stage-3:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-3"
  ]
}

運(yùn)行npm run start 就可以使用了

六累铅、其他配置

  1. 打包刪除上次的dist文件夾

安裝clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

配置webpack.config.js

//引入clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 在plugins中配置
plugins: [new CleanWebpackPlugin(["dist"])]
  1. 多環(huán)境打包配置

一般情況下會(huì)分為開發(fā)環(huán)境跃须、預(yù)發(fā)環(huán)境、生產(chǎn)環(huán)境娃兽，接下來配置一下打包環(huán)境
在src目錄下創(chuàng)建environments目錄并創(chuàng)建4個(gè)文件

mkdir environments
cd environments
touch environment.js environment.dev.js environment.stage.js environment.prod.js

environment.js // 打包時(shí)會(huì)把環(huán)境寫入到這里
environment.dev.js // 開發(fā)環(huán)境
environment.stage.js // 預(yù)發(fā)環(huán)境
environment.prod.js // 生產(chǎn)環(huán)境

environment.prod.js文件中編寫

export default environment = {
  apiHost: 'http://api.prod.com', // 生產(chǎn)環(huán)境接口地址
  sourceHost: 'http://www.prod.com', // 生產(chǎn)環(huán)境域名
  env: 'prod'
}

environment.stage.js文件中編寫

export default environment = {
  apiHost: 'http://api.stage.com', // 預(yù)發(fā)環(huán)境接口地址
  sourceHost: 'http://www.stage.com', // 預(yù)發(fā)環(huán)境域名
  env: 'stage'
}

environment.dev.js文件中編寫

export default environment = {
  apiHost: 'http://api.dev.com', // 開發(fā)環(huán)境接口地址
  sourceHost: 'http://www.dev.com', // 開發(fā)環(huán)境域名
  env: 'dev'
}

package.json文件中配置scripts：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prestart": "cat ./src/environments/environment.dev.js > ./src/environments/environment.js",
    "start": "webpack-dev-server --open --config webpack.config.js",
    "prebuild": "cat ./src/environments/environment.prod.js > ./src/environments/environment.js",
    "build": "webpack --config webpack.prod.js",
    "prebuild:dev": "cat ./src/environments/environment.dev.js > ./src/environments/environment.js",
    "build:dev": "webpack --config webpack.prod.js",
    "prebuild:stage": "cat ./src/environments/environment.stage.js > ./src/environments/environment.js",
    "build:stage": "webpack --config webpack.prod.js"
  },

執(zhí)行命令就可以按環(huán)境打包了菇民，如：

npm run build:dev
  1. 安裝vuex
npm install vuex --save

在src中目錄中創(chuàng)建store/index.js

mkdir src/store && touch src/store/index.js

在store/index.js中編寫代碼：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

在main.js導(dǎo)入并掛載到vue的實(shí)例上：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store'

Vue.config.debug = true;//開啟錯(cuò)誤提示

//系統(tǒng)錯(cuò)誤捕獲
const errorHandler = (error, vm) => {
  console.error('全局異常：', error);
  Activity.saveLog('全局異常：', error)
}
Vue.config.errorHandler = errorHandler;

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

webpack配置多頁面

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子第练，更是在濱河造成了極大的恐慌阔馋，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,386評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件娇掏，死亡現(xiàn)場離奇詭異呕寝，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)婴梧，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門下梢，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人塞蹭，你說我怎么就攤上這事孽江。” “怎么了番电？”我有些...
    開封第一講書人閱讀 164,704評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵岗屏，是天一觀的道長。 經(jīng)常有香客問我漱办，道長这刷，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,702評論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任娩井，我火速辦了婚禮崭歧，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘撞牢。我一直安慰自己率碾，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布屋彪。 她就那樣靜靜地躺著所宰，像睡著了一般。 火紅的嫁衣襯著肌膚如雪畜挥。 梳的紋絲不亂的頭發(fā)上仔粥，一...
    開封第一講書人閱讀 51,573評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音蟹但，去河邊找鬼躯泰。 笑死，一個(gè)胖子當(dāng)著我的面吹牛华糖，可吹牛的內(nèi)容都是我干的麦向。 我是一名探鬼主播，決...
    沈念sama閱讀 40,314評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼客叉，長吁一口氣：“原來是場噩夢啊……” “哼诵竭！你這毒婦竟也來了话告？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,230評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤卵慰，失蹤者是張志新（化名）和其女友劉穎沙郭，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體裳朋，經(jīng)...
    沈念sama閱讀 45,680評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡病线，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鲤嫡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氧苍。...
    茶點(diǎn)故事閱讀 39,991評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖泛范，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情紊撕，我是刑警寧澤罢荡，帶...
    沈念sama閱讀 35,706評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站对扶，受9級特大地震影響区赵，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浪南，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一笼才、第九天 我趴在偏房一處隱蔽的房頂上張望灶挟。 院中可真熱鬧侈咕，春花似錦妻献、人聲如沸稳析。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0贊 22
  • 一樁弒父案振乏，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽瞻坝。三九已至暮蹂，卻和暖如春怨愤，著一層夾襖步出監(jiān)牢的瞬間派敷，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工撰洗， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留篮愉，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,158評論 3贊 370
  • 代替公主和親
    正文 我出身青樓差导，卻偏偏與公主長得像试躏，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子设褐，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2贊 355