- project 
  - dist
    main-build.js
    main-build.js.map
    index.html
  - src
    - views
      Home.vue
      About.vue
      index.js
    main.js
    route.config.js
  - test
  package.json
  webpack.base.config.js
  webpack.dev.config.js
  webpack.config.js  

// 引入node相关模块
const fs = require("fs");
const path = require("path");
const webpack = require("webpack");
const CleanWebpackPligin = require("clean-webpack-plugin");

// 设置路径
module.exports = {
  // 打包开始的地方,即从这里开始分析模块和资源依赖
  entry: "./src/route.js",
  // 输出
  output: {
    // 输出路径
    path: path.resolve(__dirname, "./dist"),
    // 输出文件名
    filename: "[name]-build.js"
  },
  module: {
    rules: [
      {
        // 解析.vue文件
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    // 每次重新打包时清楚原本的内容
    new CleanWebpackPligin("./dist", {
      exclude: ["index.html"]
    })
  ],
  resolve: {
    // 通过.vue文件进行模板编译时,需要添加此配置
    alias: {
      vue$: "vue/dist/vue.common.js"
    }
  }
};

const webpack = require("webpack");
const WebpackDevServerOutput = require("webpack-dev-server-output");
const baseConfig = require("./webpack.base.config");

// 开发模式
baseConfig.mode = "development";
// 打包文件在内存中的输出路径,可以通过http://localhost:8066/assets/访问
baseConfig.output.publicPath = "/assets/";
// 方便追踪源代码中的错误
baseConfig.devtool = "source-map";
// 服务配置
baseConfig.devServer = {
  // 发布服务的文件夹
  contentBase: "./dist",
  host: "127.0.0.1",
  port: 8066,
  // 声明为热替换
  hot: true,
  // 第一次打包时打开浏览器
  open: true,
  // 与output中的内容保持一致
  publicPath: "/assets/"
};
baseConfig.plugins.push(
  ...[
    new webpack.NamedModulesPlugin(),
    // 热替换插件
    new webpack.HotModuleReplacementPlugin(),
    // 将webpack-dev-server在内存中打包的文件输出为本地文件
    new WebpackDevServerOutput({
      path: "./dist/assets",
      isDel: true
    })
    // ...
  ]
);
module.exports = baseConfig;

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const baseConfig = require("./webpack.base.config");

baseConfig.mode = "production";
baseConfig.plugins.push(
  ...[
    // 压缩代码 生产模式会默认调用改插件
    new UglifyJsPlugin()
    // ...
  ]
);

 "scripts": {
    // 生产模式 默认调用webpack.config.js
    "build": "webpack",
    // 开发模式 指定调用webpack.dev.config.js
    "dev": "webpack-dev-server --config webpack.dev.config.js"
  }

new WebpackDevServerOutput({
    // 文件输出路径,这里设置为devServer服务路径的子路径
    // 这样就可以通过URL访问到了
    path: "./dist/assets",
    // 重新编译时删除之前你的文件
    // 这里可能会有效率问题
    isDel: true
})