Vue二手书商城：（三）项目中的webpack配置

webpack官方文档LOADERS： https://webpack.js.org/loaders/ 
webpack插件：https://webpack.js.org/plugins/ 
babel官方文档：https://babeljs.io/docs/en/ 
babel到底该如何配置：https://segmentfault.com/a/1190000011665642

一.package.json

①babel：

• 转换规则：@babel/core、babel-loader

• 语法：@babel/preset-env

②css/less：

• css-loader解析@import和url()，依赖于style-loader

• less-loader依赖于less、css-loader、style-loader

③url：

• url-loader以文件内容的 MD5 哈希值生成新文件名，并保留所引用资源的原始扩展名，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL，依赖于file-loader

④vue：

• vue-loader解析vue文件，依赖于vue-template-compiler(跳转官方文档)

• vue、vue-router路由、vuex全局组件共享数据、axios发请求 <!--more-->

⑤生产环境的webpack配置需要的包

• html-webpack-plugin根据你自己的html模板打包出一个html文件，它会使用link/script标签引入你用webpack打包后的相关css/js文件。还可以压缩html文件

• mini-css-extract-plugin将css从js中抽取出来，如果不用它，打包之后css会和js混在一起

• optimize-css-assets-webpack-plugin压缩css

• terser-webpack-plugin压缩js

⑥webpack：

• webpack4依赖于webpack-cli

• webpack-dev-server实时打包

⑦UI ：

• mint-ui(跳转官方文档)

PS：对css/js的抽取压缩还有其他的插件，部分在webpack4已被弃用，具体可自行查找官方文档。

二.webpack.config.js

//webpack是基于Node构建的，webpack的配置文件支持Node代码
const path = require('path');
//根据模板生成一个HTML5文件
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require( 'vue-loader/lib/plugin')
​
module.exports = {
  entry: path.join(__dirname, './src/main.js'), //入口文件
  output: {//输出配置
    path: path.join(__dirname, './dist'), //输出路径
    filename: 'js/bundle.js' //输出文件名称
  },
  module: {//配置第三方loader模块
    rules: [//第三方模块匹配规则
      {//处理CSS文件
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {//处理less文件
        test: /.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {//处理图片路径，引用图片大小小于limit值(byte)，则会被转为base64格式的字符串
        test: /.(jpg|png|gif|bmp|jpeg)$/,
        use: 'url-loader?limit=5300&name=img/[name].[ext]'
      },
      {//处理字体文件 
        test: /.(ttf|eot|svg|woff|woff2)$/,
        use: 'url-loader?limit=30000&name=resource/[name].[ext]'
      },
      {//配置Babel转换高级的ES语法，不转换node_modules文件夹下的
        test: /.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {//处理vue文件
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [//插件配置
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),//指定模板文件路径
      filename: 'index.html' //设置生成页面的名称
    }),
    new VueLoaderPlugin()
  ],
  mode: 'development',//webpack4.x要加上mode，为development/production/none
  devServer: { port: 9000 }//在localhost:9000打开
};

三.webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require( 'vue-loader/lib/plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
​
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/[name].js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(le|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {//样式文件中url()使用相对地址，打包时在图片地址前加../
              publicPath: '../'
            }
          },
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /.(png|gif|bmp|jpg|jpeg)$/,
        use: 'url-loader?limit=5300&name=img/[name].[ext]'
      },
      {
        test: /.(ttf|eot|svg|woff|woff2)$/,
        use: 'url-loader?limit=30000&name=resource/[name].[ext]'
      },
      {
        test: /.js$/,
        use: 'babel-loader',
        exclude: /(node_modules)/
      },
      {
        test: /.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      favicon: './favicon.ico',
      minify: {//压缩html
        collapseWhitespace: true,
        removeComments: true,
        removeAttributeQuotes: true
      }
    }),
    new MiniCssExtractPlugin({//从JS中提取CSS
      filename: 'css/styles.css'
    }),
    new VueLoaderPlugin(),
  ],
  optimization: {//压缩JS，压缩CSS
    minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin()],
    splitChunks: {//webpack自带插件，可以将公共模块提取出来
      chunks: 'all',
      cacheGroups: {
        vendors: {
          name: 'vendors',//提取成vendors.js文件
          test: /(vue|vue-router|vuex|axios|mint-ui)/,
          priority: -10
        }
      }
    }
  },
  mode: 'production'
}

四..babelrc

preset：配置转译语法 plugin：配置插件

 

配置内容也可以写在webpack配置文件里。

 

自行选择是否使用babel-runtime等其他babel插件：https://webpack.js.org/loaders/babel-loader/

 

五.打包后的文件夹