webpack.config.js文件配置
1 const path = require('path'); //绝对路径 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 3 4 5 module.exports = { 6 entry: './src/index.js', 7 output: { 8 path: path.resolve(__dirname, 'dist'), 9 filename: 'builder.js', 10 }, 11 module: { 12 rules: [ 13 // css 14 { 15 test: /\.css$/, 16 use: ['style-loader', 'css-loader'] 17 }, 18 // less 19 { 20 test: /\.less$/, 21 use: ['style-loader', 'css-loader', 'less-loader'] //还需安装less 22 }, 23 //处理css/less背景图片资源 24 { 25 test: /\.(jpg|png|gif)$/, 26 loader: 'url-loader', // url-loader file-loader下载 27 options: { 28 limit: 8 * 1024, 29 esModule: false,//关闭es语法块 30 }, 31 type:'javascript/auto' //转换 json 为 js 32 33 }, 34 // html文件中src图片资源 35 { 36 test:/\.html$/, 37 loader:'html-loader' 38 }, 39 ] 40 }, 41 plugins: [ 42 // 打包html,会自动引入打包文件(css,js等),不需要打包前在html页面引入css\js文件 43 new HtmlWebpackPlugin({ 44 template: './src/index.html' 45 }) 46 ], 47 //模式:development, production 或 none 之中的一个 48 mode: 'development', 49 }