webpack 打包 vue 项目由于我们在开发、生产不同环境下实现不同的打包任务，因此抽取出公共的配置部分例如：web

由于我们在开发、生产不同环境下实现不同的打包任务，因此抽取出公共的配置部分例如：webpack.common.js，根据运行的环境分离出不同的文件。在开发阶段，我们将其配置放到webpack.dev.js，需要发布到生成的配置放到 webpack.prod.js 。接下来，我分为这三个阶段来记录我实现的过程

环境准备

安装 webpack 和 webpack-cli

公共文件配置

一、入口文件以及打包输出目录配置

entry: './src/main.js', // 指定打包的入口文件
  output: {
    path: path.join(__dirname, './dist'), // 指定输出文件的目录
    filename: 'bundle.js' // 指定输出文件名称
  },

二、配置 loader

安装 vue 源码，解析vue文件的vue-loader,解析vue 中的tempalte 的html 代码的 vue-html-loader ，以及解析style 样式的 vue-style-loader 配置如下：


   // 为vue 配置加载器
      {
        test: /\.vue$/, // 坑：此处加引号 导致 Error: [VueLoaderPlugin Error] No matching rule for .vue files found.
        // Make sure there is at least one root-level rule that matches .vue or .vue.html files.
        use: [
          'vue-loader'
        ],
        exclude: /(node_modules|bower_components)/
      },
     // 配置 vue-style-loader
      {
        test: /\.css$/,
        use: [
          // 'style-loader',
          'vue-style-loader', // 后将vue 中的style 样式添加到js 模块中
          'css-loader' // 先加载编译css
        ]
      },

安装加载资源文件的loader，编译less 的 less-loader, 加载图片的file-loader

// 加载less 文件的loader
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader'//  从js 模块中 创建 style 添加到HTML 中去
          },
          {
            loader: 'css-loader'// css 添加到 js 模块中
          },
          {
            loader: 'less-loader' // 将less 编译成 css
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'img',
            name: '[name].[ext]'
          }
        }
      }

配置 ES 新特性转换的babel

// 配置babel
      {
        test: /\.js/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },

安装配置eslint ,对vue或js 中的代码的语法、格式等进行提示

// 配置eslint-babel
      {
        test: /\.(js|vue)/,
        exclude: /(node_modules|bower_components)/,
        use: 'eslint-loader',
        enforce: 'pre' // 保证编译前执行
      },

三、配置插件

vue-loader 在15+ 版本之后，无法直接使用vue-loader , 需要在plugins 中实例化 VueLoaderPlugin

// 此处踩坑,webpack 5 才支持者种方式
// const VueLoaderPlugin = require('vue-loader-plugin')
// webpack 4 
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}

安装配置 html-webpack-plugin ,实现将打包好后的js 文件

开发环境下的配置

在开发环境下，我们需要在本地添加一个服务器用来运行我们打包后的项目，webpack 为我们提供了一个webpack-dev-server ，支持文件修改，页面自动刷新，以及热拔插等优化开发的体验

通过npm 或 yarn 安装 webpack-dev-server
安装webpack-merge ,合并公共配置文件

// 坑：merge is not function,需要 花括号提取成员
// const merge = require('webpack-merge')
const { merge } = require('webpack-merge')

开启热更新，文件以修改，页面无需刷新即可跟随着更新

devServer: {
    hot: true, // 开启热更新功能
    open: true, // 开启自动打开浏览器
    contentBase: './public'
    // publicPath: '/index.html'
  },

在终端中运行命令 webpack-dev-server --inline --progress --config webpack.dev.js 或者将其配置到pakage.json 中去，然后运行npm run serve

"serve": "webpack-dev-server --inline --progress --config  webpack.dev.js"

生产环境下的配置

生产环境下的配置，采用的打包模式是production，可以将最终生成的打包文件压缩。
为了避免源码暴露给外界，又能在出错的时候给开发人员提供一些方向，sourceMap采用了nosources-source-map 的方式
需要清空掉原先打包的结果，
需要将public 目录下的资源拷贝至打包文件中去

const common = require('./webpack.common')
// 坑：merge is not function,需要 花括号提取成员
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = merge(common, {
  mode: 'production',
  devtool: 'nosources-source-map',
  devServer: {
    hot: true,
    contentBase: './public'
    // publicPath: '/index.html'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        { from: 'public', to: 'public' }
      ]
    }
    )
  ]
})