1. 基本配置
  1. const path = require('path');
  3. // 基础配置
  4. const config = {
  5.     entry: path.resolve(__dirname, 'src/index.js') || ['@babel/polyfill', path.resolve(__dirname, 'src/index.js')],
  6.     outputPath: path.resolve(__dirname, 'build'),
  7.     port: 8080,
  8.     htmlTemplate: path.resolve(__dirname, 'src/index.html')
  9. };
  11. // PLUGIN 插件
  12. const HtmlWebpackPlugin = require('html-webpack-plugin'),
  13.     MiniCssExtractPlugin = require('mini-css-extract-plugin'),
  14.     // 优化css资源的插件
  15.     OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
  16.     // 优化js资源插件
  17.     UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin'),
  18.     Webpack = require('webpack');
  21. let htmlPlugin = new HtmlWebpackPlugin({
  22.         // 指定编译得文件
  23.         template: config.htmlTemplate,
  24.         // 编译后得文件名
  25.         filename: 'index.html',
  26.         // 文件压缩
  27.         minify: {
  28.             // 去除空格
  29.             collapseWhitespace: true,
  30.             // 去除注释
  31.             removeComments: true,
  32.             // 去除标签中的双引号
  33.             removeAttributeQuote: true,
  34.             // 去除设置的属性值为 undefined 的值
  35.             removeEmptyAttributes: true
  36.         }
  37.     }),
  38.     miniCssPlugin = new MiniCssExtractPlugin({
  39.         filename: 'main.css'
  40.     }),
  41.     optimizeCssPlugin = new OptimizeCssAssetsWebpackPlugin(),
  42.     uglifyJsPlugin = new UglifyJsWebpackPlugin({
  43.         cache: true, // 是否使用缓存
  44.         parallel: true, // 是否并发编译
  45.         sourceMap: true // 启动源码映射
  46.     }),
  47.     // 向每一个模块注入全局变量
  48.     webpack = new Webpack.ProvidePlugin({});
  50. // LOADER 加载器
  51. const cssLoader = {
  52.         test: /\.(css|less)$/i,
  53.         // 使用加载器
  54.         use: [
  55.             // 'style-loader',
  56.             MiniCssExtractPlugin.loader,
  57.             'css-loader',
  58.             'postcss-loader',
  59.             {
  60.                 loader: 'less-loader',
  61.                 options: {}
  62.             }
  63.         ],
  64.         exclude: /node_modules/,
  65.         include: path.resolve(__dirname, 'src')
  66.     },
  67.     jsLoader = {
  68.         test: /\.js$/i,
  69.         use: [
  70.             {
  71.                 loader: 'babel-loader',
  72.                 options: {
  73.                     // ES6 -> ES5
  74.                     presets: ['@babel/preset-env'],
  75.                     plugins: [
  76.                         ['@babel/plugin-proposal-class-properties', {"loose": true}],
  77.                         ['@babel/plugin-proposal-decorators', {"legacy": true}],
  78.                         ['@babel/plugin-transform-runtime']
  79.                     ]
  80.                 }
  81.             }
  82.         ],
  83.         exclude: /node_modules/,
  84.         include: path.resolve(__dirname, 'src')
  85.     },
  86.     imgLoader = {
  87.         test: /\.(png|jpg|peng|webp|gif|bmp|ico)$/i,
  88.         use: [{
  89.             loader: 'url-loader',
  90.             options: {
  91.                 // 小于 200kb, 处理为base64
  92.                 limit: 200 * 1024,
  93.                 outputPath: 'images'
  94.             }
  95.         }]
  96.     },
  97.     // 处理HTML文件中使用img元素引入的图片
  98.     htmlImgLoader = {
  99.         test: /\.(html|htm|xml)$/i,
  100.         use: ['html-withimg-loader']
  101.     };
  104. module.exports = {
  105.     // 环境 development production
  106.     mode: 'production',
  107.     // 入口
  108.     entry: config.entry,
  109.     // 出口
  110.     output: {
  111.         publicPath: './',
  112.         // 文件名
  113.         filename: 'bundle.min.[hash:8].js',
  114.         // 输出路径
  115.         path: config.outputPath
  116.     },
  117.     // 设置优化项
  118.     optimization: {
  119.         // 压缩优化
  120.         minimizer: [
  121.             optimizeCssPlugin,
  122.             uglifyJsPlugin
  123.         ]
  124.     },
  125.     // webpack-dev-server
  126.     devServer: {
  127.         // 创建服务指定的端口号
  128.         port: config.port,
  129.         // 打包显示进度条
  130.         progress: true,
  131.         // 指定当前服务处理资源的目录
  132.         contentBase: config.outputPath,
  133.         // 自动打开浏览器
  134.         open: true
  135.     },
  136.     // plugins
  137.     plugins: [
  138.         htmlPlugin,
  139.         miniCssPlugin,
  140.         webpack
  141.     ],
  142.     // loader 模块加载器
  143.     module: {
  144.         rules: [
  145.             cssLoader,
  146.             jsLoader,
  147.             imgLoader,
  148.             htmlImgLoader
  149.         ]
  150.     }
  152. };
  1. package.json
    {
"name": "webpack-app",
"version": "1.0.0",
"description": "webpack学习",
"main": "./src/index.js",
"scripts": {
 "dev": "webpack --config webpack.config.dev.js",
 "pro": "webpack --config webpack.config.pro.js",
 "server": "webpack-dev-server --config webpack.config.dev.js"
},
"keywords": [
 "webpack"
],
"author": "korealu",
"license": "ISC",
"browserslist": [
 "> 1%",
 "last 2 versions"
],
"devDependencies": {
 "@babel/core": "^7.8.4",
 "@babel/plugin-proposal-class-properties": "^7.8.3",
 "@babel/plugin-proposal-decorators": "^7.8.3",
 "@babel/plugin-transform-runtime": "^7.8.3",
 "@babel/preset-env": "^7.8.4",
 "autoprefixer": "^9.7.4",
 "babel-loader": "^8.0.6",
 "css-loader": "^3.4.2",
 "eslint": "^6.8.0",
 "eslint-loader": "^3.0.3",
 "expose-loader": "^0.7.5",
 "file-loader": "^5.0.2",
 "html-webpack-plugin": "^3.2.0",
 "html-withimg-loader": "^0.1.16",
 "less": "^3.11.1",
 "less-loader": "^5.0.0",
 "mini-css-extract-plugin": "^0.9.0",
 "optimize-css-assets-webpack-plugin": "^5.0.3",
 "postcss-loader": "^3.0.0",
 "style-loader": "^1.1.3",
 "uglifyjs-webpack-plugin": "^2.2.0",
 "url-loader": "^3.0.0",
 "webpack": "^4.41.6",
 "webpack-cli": "^3.3.11",
 "webpack-dev-server": "^3.10.3"
},
"dependencies": {
 "@babel/polyfill": "^7.8.3",
 "@babel/runtime": "^7.8.4"
}
}