webpack demo
//webpack.config.jsconst path = require('path')const uglify = require('uglifyjs-webpack-plugin') //引进压缩插件const htmlPlugin = require('html-webpack-plugin') //引进html打包插件const extractTextPlugin = require('extract-text-webpack-plugin') //引进css分离插件const glob = require('glob') //规则模块，使用正则匹配获取对应规则的文件const PurifyCSSPlugin = require("purifycss-webpack") //引进消除无用css插件let websit = { publicPath: "http://192.168.2.153:1111/"}module.exports = { entry: { //入口,当需要打包多个js文件时，就需要配置多个入口文件
entry: './src/entry.js', entry2: './src/entry.js'
}, output: { //输出
path: path.resolve(__dirname, 'dist'), filename: '[name].js', //name为entry对象里属性key来取输出口文件名称
publicPath: websit.publicPath //配置公共路径，这样在打包html时，所有引用的文件（css\js）全部都会使用配置的公共路径，就不会造成引用路径地址不正确的问题
}, module: { //css,图片转换，压缩都在这里配置
rules: [ //规则，数组形式，因为可以配置多个规则
{ //可以设定4个参数，test、use为必需，indude/exindude、query为可选
test: /\.css$/, //打包css文件
use: ['style-loader', 'css-loader', 'postcss-loader'] //indude/exindude 是指手动配置哪些文件需要处理
//query
},
{ //背景图片打包
test: /\.(jpg|png|gif)/, use: [{ loader: 'url-loader', options: { limit: 5000, //图片大于5000kb，转换为64位编码
outputPath: 'images/' //打包后输出的位置
}
}]
},
{ //img标签图片插件，webpack不支持使用img标签引入图片，所以需要使用国人做的loader去配置
test: /\.(htm|html)$/i, use: ["html-withimg-loader"]
},
{ //打包并分离less
test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader"
}, { loader: "less-loader"
}], fallback: "style-loader"
})
},
{ //打包并分离sass
test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader"
}, { loader: "sass-loader"
}], fallback: "style-loader"
})
},
{ //babel转化ES678和react的jsx文件
test: /\.(jsx|js)$/, use: { loader: 'babel-loader'
}, exclude: /node_modules/ //忽略，正则匹配该文件不参与转化
}
]
}, plugins: [ //插件
new uglify() //js代码压缩
new htmlPlugin({ //html文件打包
minify: { //去除html文件引用地址中的""引号
removeAttributeQuotes: true
}, hash: true, //为文件添加哈希值，防止因为缓存的原因导致，浏览器无法触发刷新
template: './src/index.html' //模版文件地址
}), new PurifyCSSPlugin({ //消除沉余css插件
paths: glob.sync(path.join(__dirname, 'src/*.html')) //使用glob.sync同步遍历获取对应规则文件
})
], devServer: { //配置webpack开发服务
contentBase: path.resolve(__dirname, 'dist'), //基本目录结构，指启动后服务器指向位置
compress: true, //服务器压缩服务
host: '192.168.10.102', port: 888
}
}webpackServer：
步骤：
npm install webpack-dev-server --save-dev
通过package.json里的scripts添加
"server": "webpack-dev-server"脚本进行启动（因为我们是安装在项目文件的node_modules里，并没有添加到环境变量中，所以无法通过全局启动）
css文件打包配置：
步骤：
npm install style-loader css-loader --save-dev
在webpack.config.js的
module中进行设置
module模块引入方式有三种:
1.
{ test:/\.css$/,
use:['style-loader', 'css-loader']
}
2.
{ test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
3.这种方式比较常用
{ test: /\.css$/,
use:[{
loader: "style-loader"
},{ loader: "css-loader"
}]
}html文件打包配置
步骤：
npm install --save-dev html-webpack-plugin
在
plugins中配置相关信息requeire('html-webpack-plugin')
图片打包配置(只适用于背景图片)
步骤：
npm install --save-dev url-loader
在
module中进行配置
ps：有两个图片处理的模块(file-loader、url-loader)，但只需要使用url-loader模块就可以，因为它包含了file-loader的功能
img标签图片打包配置
步骤：
npm install --save-dev html-withimg-loader
在
module中进行配置
css分离配置和publicPath
步骤：
npm install --save-dev extract-text-webpack-plugin
requeire('extract-text-webpack-plugin')
需要更改三个地方：
let websit = { publicPath: "http://192.168.2.153:1111/"}
output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: websit.publicPath //1.配置公共路径，这样在打包html时，所有引用的文件（css\js）全部都会使用配置的公共路径，就不会造成引用路径地址不正确的问题}module: { rules: [{ test: /\.css$/, use: extractTextPlugin.extract({ //2.css分离模块配置
fallback: "style-loader", use: "css-loader"
})
}]
}, plugins: [ new extractTextPlugin("/css/index.css") //3.分离后，讲css放置在哪个文件夹中
]less打包并分离
步骤：
npm install --save-dev less less-loader
在
module中进行配置
sass打包并分离
步骤：
npm install --save-dev node-sass sass-loader
在
module中进行配置
postcss自动添加前缀
步骤：
npm install --save-dev postcss-loader autoprefixer
在和
webpack.config.js同级目录下创建新文件postcss.config.js
//postcss.config.jsmodule.exports = { //配置postcss插件
plugins: [
require('autoprefixer')
]
}在
module中进行配置
消除沉余（未使用）css
步骤：
npm i -D purifycss-webpack purify-css
require('glob') && require("purifycss-webpack")
在
plugins中配置
ps：PurifyCSS（消除沉余css插件）必须配合extract-text-webpack-plugin（css分离插件）使用，否则会报错
ES678和react（jsx）转化工具
步骤
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack.config.js同级目录下创建
.babelrc文件
//.babelrc{ "presets": [ "env", "react"
]
}在
module中进行配置
webpack打包后调试代码
在webpack.config.js添加devtool
source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
在配置devtool时，webpack给我们提供了四种选项。
四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。
image.png
如何调试
image.png
image.png
启动webpack server服务后打开控制台
image.png
作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/afc9dc4146c7
随时随地看视频
