webpack4+vue+vuex+vue-router 搭建vue开发环境

记录一下自己使用 webpack4 搭建vue环境的步骤，仅供参考。

一、创建目录

1.创建项目目录并且初始化项目

mkdir Webpack-Vue
cd Webpack-Vue
npm init -y

mkdir src src/components dist

dist 用于存放 Webpack 打包后的项目文件、src 用于存放源代码文件

创建入口文件

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

创建如下文件，用来配置webpack


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

接下来编写配置文件

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// 压缩内联css
      }
    }),
  ]
}

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
  }
})

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,
    })],
  },
})

编写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"
  },

控制台运行：

npm run start

四、安装 Vue及Vue-router：

安装vue

npm i vue --save

修改 main.js 文件:

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

同级目录下创建一个 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>

添加vue-router

首先控制台安装vue-router依赖包：

npm install vue-router --save

在src目录下创建router文件夹并在此文件夹下创建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
  }]
})

创建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;//开启错误提示

//系统错误捕获
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

babel-loader

为了使 JavaScript 代码兼容更多环境，需要使用 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/
}

添加一个配置文件（.babelrc）在根目录下：


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

file-loader

这个用于将字体文件、图片文件进行模块化。首先安装 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'
  ]
}

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 数组中添加这个插件

new VueLoaderPlugin(),

配置别名，将 resolve.alias 配置:

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

添加一个 resolve.extensions 属性:

extensions: ['*', '.js', '.json', '.vue'],

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"
  ]
}

运行npm run start 就可以使用了

六、其他配置

打包删除上次的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"])]

多环境打包配置

一般情况下会分为开发环境、预发环境、生产环境，接下来配置一下打包环境
在src目录下创建environments目录并创建4个文件

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

environment.js // 打包时会把环境写入到这里
environment.dev.js // 开发环境
environment.stage.js // 预发环境
environment.prod.js // 生产环境

environment.prod.js文件中编写

export default environment = {
  apiHost: 'http://api.prod.com', // 生产环境接口地址
  sourceHost: 'http://www.prod.com', // 生产环境域名
  env: 'prod'
}

environment.stage.js文件中编写

export default environment = {
  apiHost: 'http://api.stage.com', // 预发环境接口地址
  sourceHost: 'http://www.stage.com', // 预发环境域名
  env: 'stage'
}

environment.dev.js文件中编写

export default environment = {
  apiHost: 'http://api.dev.com', // 开发环境接口地址
  sourceHost: 'http://www.dev.com', // 开发环境域名
  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"
  },

执行命令就可以按环境打包了，如：

npm run build:dev

安装vuex

npm install vuex --save

在src中目录中创建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导入并挂载到vue的实例上：

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

Vue.config.debug = true;//开启错误提示

//系统错误捕获
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配置多页面