webpack4.x配置vue开发/生产环境

vue在国内很火，在github上的star已经超过了react。
现在vue-cli3.x已经正式发布了，相信很多人也在使用vue开源的脚手架，前几个月我写过一篇关于vue-cli3.x的使用文章，也有很多朋友问我脚手架的相关使用问题，我最近花了两天时间研究了下，最终得出一个结论，真的是贼难用，因为我根本不知道怎么在vue.config.js中去配置全局引用、路径别名等。
官方文档介绍了怎么在config中配置，文档告诉我配置webpack相关需在chainWebpack中配置，我研究了半天，知道配置路径别名是如下配置的：

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

可是怎么去设置全局引用api呢？不懂...
所以我还是选择手动配置webpack，下面把我的配置给大家讲解下。。。

一、开始之前先安装好nodeJs和npm，下面是我的node和npm版本。并创建一个项目vue-webpack4（名字你高兴咋起就咋起）

node&npm.png

二、项目目录结构
1.在vue-webpack4目录下打开cmd执行npm init -y生成package.json
2.在vue-webpack4目录下新建src目录，在src下新建assets、components目录和index.html main.js router.js store.js

---src
   ---assets // 静态资源，如图片、css
   ---index.html // html模版文件
   ---main.js // 入口文件
   ---router.js // 路由文件
   ---store.js // 仓库文件

src.png

3.在vue-webpack4目录下创建webpack.config.js（所有的开发生产配置都将写到这里）

三、package.json中的相关依赖

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "webpack4.0搭建vue开发环境",
  "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中设置了dev和build，开发和生产两种模式。
其中在dev中设置开环境变量为development，
在build中设置开环境变量为production

四、配置webpack.config.js
1.获取环境变量

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

下面会根据开发或生产环境进行不同的配置；

2.设置入口文件

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

3.既然有入口，就应当有出口

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.开发环境启用source-map

{...}
devtool: isProd?false:'eval-source-map', // 如果只用source-map开发环境出现错误定位源文件，生产环境会生成map文件
{...}

5.配置module.rules,
文本分离插件在webpack3.x之前试用的extract-text-webpack-plugin，现在webpack4.x版本建议使用mini-css-extract-plugin

const MiniCssExtractPlugin=require('mini-css-extract-plugin'); // 文本分离插件，分离js和css
/**
 *  css和stylus开发、生产依赖
 *  生产分离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将图片转换成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.配置开发模式热启动

{...}
devServer:isProd?{}:{
        contentBase: path.join(__dirname, 'dist') // 将 dist 目录下的文件，作为可访问文件。
        ,compress: true // 开启Gzip压缩
        ,host: 'localhost' // 设置服务器的ip地址，默认localhost
        ,port: 9001 // 端口号
        ,open:true // 自动打开浏览器
}
{...}

7.配置引入文件不用带后缀和路径别名

{...}
resolve: {
        extensions: ['.js', '.vue', '.styl'], // import引入文件的时候不用加后缀
        modules: [ // 配置路径别名
            'node_modules'
            ,path.resolve(__dirname, 'src/components')
            ,path.resolve(__dirname, 'src/assets')
        ]
    }
{...}

8.插件

const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin'); // 自动生成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页头的时间（并没什么卵用）
        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发送请求，不用每次都import Axios from 'axios';也不用挂载到vue原型链上
        })
    ]
{...}

9.抽离js和css

{...}
optimization: {
        splitChunks: {
            cacheGroups:{ // 这里开始设置缓存的 chunks
                vendor: { // key 为entry中定义的 入口名称
                    chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
                    test: /node_modules/, // 正则规则验证，如果符合就提取 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"; // 状态管理

import App from "App"; // 导入App组件（为什么这样导入？请看第四段中的第7）

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

六、编写router.js
和脚手架生成的一样；
七、编写store.js
和脚手架生成的一样；
八、命令
开发启动命令：npm run dev
生产打包命令：npm run build
九、最后在vue-webpack4目录下新建.babelrc文件，
设置babel转码和指定浏览器版本

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

十、最后就可以肆无忌惮的编写vue代码啦！
以上都是个人心得，若有不对的地方，还希望大家多多指出，共同学习成长！

作者：我友几个逗逼
链接：https://www.jianshu.com/p/87b48e29773c
來源：简书