webpack demo
//webpack.config.js
const 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.js
module.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
- 在配置devtool时，webpack给我们提供了四种选项。
- 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
