Vue二手书商城:(三)项目中的webpack配置

2020-02-13

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

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发请求

⑤生产环境的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'
}