1. const path = require('path')
    2. const HtmlPlugin = require('html-webpack-plugin')
    3. var { CleanWebpackPlugin } = require('clean-webpack-plugin')
    4. const { resolve } = require('path')
    6. /* 创建 HtmlPlugin 对象 */
    7. const htmlPlugin = new HtmlPlugin({
    8.   template: './src/index.html',
    9.   filename: './index.html'
    10. })
    12. module.exports = {
    13.   /* 运行模式 */
    14.   mode: 'development',
    16.   /* 调试工具 */
    17.   // devtool: 'eval-source-map',
    18.   devtool: 'nosoures-source-map',
    20.   /* 打包入口 */
    21.   entry: path.join(__dirname, './src/js/index.js'),
    23.   /* 打包出口 */
    24.   output: {
    25.     /* 打包后文件存放路径 */
    26.     path: path.join(__dirname, 'dist'),
    27.     /* 打包后文件名 */
    28.     filename: 'js/bundle.js'
    29.   },
    31.   /* 插件 */
    32.   plugins: [htmlPlugin, new CleanWebpackPlugin()],
    34.   devServer: {
    35.     /* 首次打包，自动打开浏览器 */
    36.     open: true,
    37.     /* 实时打包主机地址 */
    38.     host: '127.0.0.1',
    39.     /* 主机端口 */
    40.     port: 6060
    41.   },
    43.   /* 第三方模组 */
    44.   module: {
    45.     /* 匹配规则 */
    46.     rules: [
    47.       /* css 样式文件 */
    48.       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    49.       /* scss 样式文件 */
    50.       { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
    51.       /* less 样式文件 */
    52.       { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
    53.       /* 图片路径 */
    54.       { test: /\.jpg|png|gif|jpeg|bmp$/, use: 'url-loader?limit=64000&outputPath=images' },
    55.       /* 高级 js 语法 */
    56.       { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' },
    57.     ]
    58.   },
    60.   /* 路径快捷 */
    61.   resolve: {
    62.     alias: {
    63.       /* @ 代替 src 文件夹 */
    64.       '@': path.join(__dirname, './src/')
    65.     }
    66.   }
    67. }