vue在國內(nèi)很火，在github上的star已經(jīng)超過了react。
現(xiàn)在vue-cli3.x已經(jīng)正式發(fā)布了，相信很多人也在使用vue開源的腳手架，前幾個(gè)月我寫過一篇關(guān)于vue-cli3.x的使用文章，也有很多朋友問我腳手架的相關(guān)使用問題，我最近花了兩天時(shí)間研究了下，最終得出一個(gè)結(jié)論，真的是賊難用，因?yàn)槲腋静恢涝趺丛趘ue.config.js中去配置全局引用、路徑別名等。
官方文檔介紹了怎么在config中配置，文檔告訴我配置webpack相關(guān)需在chainWebpack中配置，我研究了半天，知道配置路徑別名是如下配置的：

// vue.config.js
chainWebpack: config => {
        config.resolve.alias
            .set('assets', path.join(__dirname, 'src/assets'))
            .set('components', path.join(__dirname, 'src/components'))
    }

可是怎么去設(shè)置全局引用api呢？不懂...
所以我還是選擇手動(dòng)配置webpack，下面把我的配置給大家講解下。。。

一、開始之前先安裝好nodeJs和npm，下面是我的node和npm版本。并創(chuàng)建一個(gè)項(xiàng)目vue-webpack4（名字你高興咋起就咋起）

node&npm.png

二、項(xiàng)目目錄結(jié)構(gòu)
1.在vue-webpack4目錄下打開cmd執(zhí)行npm init -y生成package.json
2.在vue-webpack4目錄下新建src目錄，在src下新建assets、components目錄和index.html main.js router.js store.js

---src
   ---assets // 靜態(tài)資源，如圖片、css
   ---index.html // html模版文件
   ---main.js // 入口文件
   ---router.js // 路由文件
   ---store.js // 倉庫文件

src.png

3.在vue-webpack4目錄下創(chuàng)建webpack.config.js（所有的開發(fā)生產(chǎn)配置都將寫到這里）

三、package.json中的相關(guān)依賴

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "webpack4.0搭建vue開發(fā)環(huán)境",
  "main": "main.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --mode development --profile --progress",
    "build": "cross-env NODE_ENV=production webpack --mode production --profile --progress"
  },
  "author": "xs",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^4.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "postcss-loader": "^2.1.6",
    "poststylus": "^1.0.0",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue-hot-reload-api": "^2.3.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.3.0",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.5",
    "webpack-cli": "^2.1.5",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }
}

大家可以看到scripts中設(shè)置了dev和build，開發(fā)和生產(chǎn)兩種模式。
其中在dev中設(shè)置開環(huán)境變量為development，
在build中設(shè)置開環(huán)境變量為production

四、配置webpack.config.js
1.獲取環(huán)境變量

const isProd=process.env.NODE_ENV==='production';

下面會根據(jù)開發(fā)或生產(chǎn)環(huán)境進(jìn)行不同的配置；

2.設(shè)置入口文件

entry: {
        main: './src/main.js', // 入口文件
        vendor: ['axios'] // 打包第三方庫放在vendor.js中
}
{...}

3.既然有入口，就應(yīng)當(dāng)有出口

const path=require('path');
{...}
output: {
        path: path.resolve(__dirname, 'dist'), // 打包目錄
        filename: isProd?'javascript/[name].[hash:8].js':'[name].js', // [name] 是entry的key
        publicPath: isProd?'./':'/'
}
{...}

4.開發(fā)環(huán)境啟用source-map

{...}
devtool: isProd?false:'eval-source-map', // 如果只用source-map開發(fā)環(huán)境出現(xiàn)錯(cuò)誤定位源文件，生產(chǎn)環(huán)境會生成map文件
{...}

5.配置module.rules,
文本分離插件在webpack3.x之前試用的extract-text-webpack-plugin，現(xiàn)在webpack4.x版本建議使用mini-css-extract-plugin

const MiniCssExtractPlugin=require('mini-css-extract-plugin'); // 文本分離插件，分離js和css
/**
 *  css和stylus開發(fā)、生產(chǎn)依賴
 *  生產(chǎn)分離css
 */
const cssConfig=[isProd?MiniCssExtractPlugin.loader:'vue-style-loader',{
        loader: 'css-loader',
        options: {
            minimize: isProd,
            sourceMap: !isProd
        }
    },'postcss-loader']
    ,stylusConfig=[isProd?MiniCssExtractPlugin.loader:'vue-style-loader',{
        loader: 'css-loader',
        options: {
            minimize: isProd,
            sourceMap: !isProd
        }
    },{
        loader: 'stylus-loader',
        options: {
            sourceMap: !isProd
        }
    }];
{...}
module: {
        rules: [
            {
                test: /\.css$/,
                use:cssConfig
            },
            {
                test: /\.styl(us)?$/,
                use: stylusConfig
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    hotReload: true, // 熱重載
                    loaders:{
                        css: cssConfig,
                        stylus: stylusConfig
                    }
                },
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query:{
                    presets: ['env']
                },
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                )
            },
            {
                test: /\.(png|jpe?g|gif|bmp|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 配置圖片編譯路徑
                        limit: 8192, // 小于8k將圖片轉(zhuǎn)換成base64
                        name: '[name].[hash:8].[ext]',
                        outputPath: 'images/'
                    }
                },{
                    loader: 'image-webpack-loader', // 圖片壓縮
                    options: {
                        bypassOnDebug: true
                    }
                }]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-loader',
                    options: { // 配置html中圖片編譯
                        minimize: true
                    }
                }]
            },
            {test: /\.(mp4|ogg|svg)$/,use: ['file-loader']},
            {
                test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:8192,
                    name:'fonts/[name].[hash:8].[ext]'
                }
            }
        ]
}
{...}

6.配置開發(fā)模式熱啟動(dòng)

{...}
devServer:isProd?{}:{
        contentBase: path.join(__dirname, 'dist') // 將 dist 目錄下的文件，作為可訪問文件。
        ,compress: true // 開啟Gzip壓縮
        ,host: 'localhost' // 設(shè)置服務(wù)器的ip地址，默認(rèn)localhost
        ,port: 9001 // 端口號
        ,open:true // 自動(dòng)打開瀏覽器
}
{...}

7.配置引入文件不用帶后綴和路徑別名

{...}
resolve: {
        extensions: ['.js', '.vue', '.styl'], // import引入文件的時(shí)候不用加后綴
        modules: [ // 配置路徑別名
            'node_modules'
            ,path.resolve(__dirname, 'src/components')
            ,path.resolve(__dirname, 'src/assets')
        ]
    }
{...}

8.插件

const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin'); // 自動(dòng)生成index.html
const CleanWebpackPlugin=require('clean-webpack-plugin'); // 清理垃圾文件

const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue加載器
const PostStylus=require('poststylus'); // stylus加前綴
{...}
plugins: [
        new VueLoaderPlugin(), // vue加載器
        new webpack.BannerPlugin(`xs build at ${Date.now()}`), // 打包后在.js/.css頁頭的時(shí)間（并沒什么卵用）
        new CleanWebpackPlugin([path.join(__dirname, isProd?'dist':'')]), // 每次打包之前清理打包目錄
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html') // 引入模版
            ,favicon: path.join(__dirname, 'src/assets/icon/favicon.ico')
            ,filename: 'index.html'
            ,minify: { // 對index.html壓縮
                collapseWhitespace: isProd // 去掉index.html的空格
                ,removeAttributeQuotes: isProd // 去掉引號
            }
            ,hash: true // 去掉上次瀏覽器的緩存（使瀏覽器每次獲取到的是最新的html）
        }),
        new MiniCssExtractPlugin({ // 分離css
            filename: isProd?'stylesheets/[name].[hash:8].css':'[name].css',
            allChunks: true
        }),
        new webpack.NamedModulesPlugin(), // 熱更新 HMR
        new webpack.HotModuleReplacementPlugin(), // 熱加載插件 HMR
        new webpack.LoaderOptionsPlugin({ // stylus加前綴
            options: {
                stylus: {
                    use: [
                        PostStylus(['autoprefixer']),
                    ]
                },
                babel: {
                    presets: ['es2015'],
                    plugins: ['transform-runtime']
                }
            }
        }),
        new webpack.ProvidePlugin({ // 配置第三方庫
            $http: 'axios' // 在.vue文件中可以使用$http發(fā)送請求，不用每次都import Axios from 'axios';也不用掛載到vue原型鏈上
        })
    ]
{...}

9.抽離js和css

{...}
optimization: {
        splitChunks: {
            cacheGroups:{ // 這里開始設(shè)置緩存的 chunks
                vendor: { // key 為entry中定義的 入口名稱
                    chunks: 'initial', // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步)
                    test: /node_modules/, // 正則規(guī)則驗(yàn)證，如果符合就提取 chunk (指定是node_modules下的第三方包)
                    name: 'vendor', // 要緩存的 分隔出來的 chunk 名稱
                    minChunks: 1,
                    enforce: true
                },
                styles: {
                    chunks: 'all',
                    test: /\.(css|styl)$/,
                    name: 'vendor',
                    minChunks: 1,
                    enforce: true
                }
            }
        }
    }

五、編寫main.js
在components目錄下新建App.vue

const root=document.createElement('div');
document.body.appendChild(root);

import Vue from "vue";

import router from "./router"; // 路由
import store from "./store"; // 狀態(tài)管理

import App from "App"; // 導(dǎo)入App組件（為什么這樣導(dǎo)入？請看第四段中的第7）

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount(root);

六、編寫router.js
和腳手架生成的一樣；
七、編寫store.js
和腳手架生成的一樣；
八、命令
開發(fā)啟動(dòng)命令：npm run dev
生產(chǎn)打包命令：npm run build
九、最后在vue-webpack4目錄下新建.babelrc文件，
設(shè)置babel轉(zhuǎn)碼和指定瀏覽器版本

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

十、最后就可以肆無忌憚的編寫vue代碼啦！
以上都是個(gè)人心得，若有不對的地方，還希望大家多多指出，共同學(xué)習(xí)成長！