1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 5 // const webpack = require('webpack'); 6 7 module.exports = { 8 mode: 'development', 9 entry: './src/index.js', 10 output: { 11 filename: 'bundle.[hash:8].js', 12 path: path.resolve(__dirname, 'dist') 13 }, 14 plugins: [ 15 new HtmlWebpackPlugin({ 16 template: './src/index.html', 17 filename: 'index.html' 18 }), 19 new MiniCssExtractPlugin({ 20 filename: 'main.css' 21 }), 22 new OptimizeCssAssetsPlugin({ 23 cssProcessor: require('cssnano'), // 配置压缩选项 24 cssProcessorPluginOptions: { 25 preset: ['default', { discardComments: { removeAll: true } }], 26 }, 27 canPrint: true // 是否将插件的信息打印到控制台 28 }), 29 /* new webpack.ProvidePlugin({ 30 $: 'jquery' 31 })*/ 32 ], 33 module: { 34 rules: [ 35 { 36 test: /\.html$/, 37 use: 'html-withimg-loader' 38 }, 39 { 40 test: /\.(png|jpg|gif)$/, 41 // use: 'file-loader' 42 use: { 43 loader: 'url-loader', 44 options: { 45 limit: 100 * 1024 46 } 47 } 48 }, 49 { 50 test: /\.css$/, 51 use: [ 52 MiniCssExtractPlugin.loader, 53 'css-loader' 54 ] 55 }, 56 { 57 test: /\.less$/, 58 use: [ 59 { 60 loader: MiniCssExtractPlugin.loader, 61 options: { 62 insertAt: 'top' 63 }, 64 }, 65 'css-loader', 66 'less-loader' 67 ] 68 }, 69 { 70 test: /\.js$/,//将es6的语法编译为低阶语法 71 use: [ 72 { 73 loader: 'babel-loader', 74 options: { 75 presets: ['@babel/preset-env'], 76 plugins: ["@babel/plugin-proposal-class-properties"] 77 } 78 } 79 ] 80 }, 81 /* 82 { 83 test: require.resolve("jquery"), 84 use: 'expose-loader?$' 85 } 86 */ 87 ] 88 } 89 };
转载于:https://www.cnblogs.com/zhangzhengyang/p/11235282.html
