本文共 2288 字，大约阅读时间需要 7 分钟。
const webpack = require('webpack');const htmlWebpackPlugin = require('html-webpack-plugin');const copyWebpackPlugin = require('copy-webpack-plugin');const imageminWebpackPlugin = require('imagemin-webpack-plugin').default;const webpackSpritesmith = require('webpack-spritesmith');module.exports = {//入口和输出的两个配置字段 //入口是指定需要被打包的一些文件 entry:{ bundle_test:__dirname+'/js/test.js' //js文件也可以不打包在一起也是允许的 }, output:{ //最终输出的目录位置 path:__dirname+'/dist', //保存的目录 可以是不存在的目录 不存在就会新建一个目录出来 filename:'[name].js' //文件的名称 name分别是 入口中相对应的 key值 }, //打包模式 在这里改变打包模式的参数 //devtool:'eval' devtool:'source-map', plugins:[ //使用相应的 压缩打包 的内置插件 前提要先设置devtool 为 source-map new webpack.optimize.UglifyjsPlugin({ sourceMap:true, //是否支持生成sourceMap文件 ie8:true //是否支持ie8浏览器 }), //html的打包的插件的使用 webpack会自行将打包好的js导入到html文件当中 new htmlWebpackPlugin({ template:__dirname+'/index.html', //文件来源的路径 filename:__dirname+'/dist/index2.html' //打包生成的目录 }), //先复制图片 再 做压缩的操作 复制图片的时候 先是数组 里面再添加 对象 new copyWebpackPlugin([{ from:__dirname+'/img', to:'./img' //to的路径 默认就是 在文件输出的位置 }]), //压缩图片 new imageminWebpackPlugin({ disable:true, //是否开启压缩 test:/\.(jpe?g|png|gif|svg)$/i, pngquant:{ //压缩的比例 quality:'10-80' //压缩的比例 10 是想要压缩的目标值 80原来图片的值 }, optipng:{ optimizationLevel:6 //优先级别 } }), //制作精灵图 new webpackSpritesmith({ src:{ //想要被制作为精灵图的目标路径和文件格式 cwd:__dirname+'/img', glob:'*.png' //匹配相应的图片格式 }, target:{ //制作的精灵图存放的位置 image:__dirname+'/dist/img/s.png', //精灵图的的位置 css:__dirname+'/dist/css/s.css' }, apiOptions:{ // 样式文件中调用雪碧图地址写法 cssImageRef:'../img/s.png' }, spritesmithOptions:{ // 图标的排序算法 algorithm:'top-down' } }) ], module:{ rules:[{ test:/\.css$/, //css的文件的解析规则 //当我们有多种规则都同时存在的时候 可以用!分割开来 //解析顺序是从后往前 loader:'style-loader!css-loader' },{ test:/\.(png|jpg|jpeg|gif)$/, use:[{ loader:'url-loader', //使用url-loader options:{ limit:10000 //遇到小于等于10000B的图片进行转化为base64代码，直接载入html } }] }] }} 转载地址：http://mgdti.baihongyu.com/