前提是对webpack有初步的认识概述、使用。
1.webpack4的webpack.config.js的配置框架
module.export={
entry:'',//入口
output:'',//打包出口
devServer:{},//开发服务器
module:{},//模块配置
plugins:[],//插件的配置
mode:''//更改模式（开发模式、线上模式）
resolve:{}//配置解析
}
每次修改代码都要重新打包、打包后都要找到html文件，然后打开浏览器是很耗时的，于是有了devServer。
2.配置开发服务器（devServer）
- 能够在本地开启服务，
- 能够进行服务器压缩，
- 能自动打开浏览器，
- 能够监听你的代码的修改，并自动刷新显示修改后的结果
- devServer的配置
安装： npm i webpack-dev-server –D
devServer:{
contentBase:path.resolve(__dirname,'dist'),// 配置开发服务运行时的文件根目录 （把出口js打包到dist文件夹下，运行目录就是dist）
host:'localhost',//开发服务器监听的主机地址
compress:true,//开发服务器是否启动gzip等压缩
port:3000,//开发服务器监听的端口
open:true,// 自动打开浏览器
// hot:true//开启模块热替换（此项配置需要插件配合，请继续阅读下文）
}，
每次打包，开启一个开发服务器devServer，都要输入一大段的代码，很麻烦，那就需要简化命令。
3.命令行的简化
修改pack.json文件中的scripts配置即可自定义执行命令
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
这样
- 在命令行输入 npm run build 相当于执行了对应的webpack打包。
- 在命令行输入 npm run start相当于执行了对应的webpack-dev-server开启了一个开发服务器。
如果不知道打包后js的名字，所以一旦打包后的名字改变，那么就需要手动的修改html的script的src的地址，这样是很耗时的，所以webpack提供了自动产出HTML文件的功能，并在里边引入打包后的js文件
4.自动产出html文件插件 （html-webpack-plugin）
如果你有这么一个疑问：html文件如果有很多内容的情况下，怎么能自动产出呢？
-
没关系：我们只需要一个html文件的作为模板即可解决（一般作为一个VUE单页面应用的话，html文件中有一个<div id="app"></div>元素就够了）
html模板一般是这种情况的<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <title><%=htmlWebpackPlugin.options.title%></title> <!--动态的title，对应下文配置中的title属性--> <link type="text/css" href="./src/assets/css/common.css"> </head> <body> <div id="app"></div> </body> </html> -
html-webpack-plugin的配置说明
安装： npm i html-webpack-plugin 引入插件：let HtmlWebpackPlugin = require('html-webpack-plugin'); ***（插件都是面向对象的类，所以插件的配置都需要new 一个它的实例）*** plugins:[ new HtmlWebpackPlugin({ filename:'a.html',//自动生成的html文件的名字（不配置此项的话，默认为模板的名字index.html） template:'./src/index.html',//模板的路径 title:'新生成的html的title',//此配置需要模板html的配合：<title><%=htmlWebpackPlugin.options.title%></title> hash:true,//为了防止缓存可以给生成的html文件引入的js加上hash值（需要出口文件的配合） //chunks: ['index']//chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。(此处先不做配置) }), ],
以下是生成在build文件夹（output路径）下的a.html和对应带有hash的build.js文件。
QQ图片20180507160953.png
因为hash的原因，所以每次都会产生一个不同hash的js文件，所以需要我们，每生成一个html文件之前都消灭之前生成的js文件。
5.自动清除文件插件（clean-webpack-plugin）
他能清除一个文件夹下的所有文件(防止产生的带有不同hash值的js文件太多)
单入口文件的自动产出html文件示例：
let path = require('path');
+ let HtmlWebpackPlugin = require('html-webpack-plugin');
+ let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:'./src/index.js', // 入口
output:{//出口
+ filename:'build.[hash:8].js',//[hash:8]代表有8个随机数的hash值
path: path.resolve('./build')
},
/*devServer:{
contentBase:'./build',
port:3000,
compress:true,// 服务器压缩
open:true,// 自动打开浏览器
// hot:true
},// 开发服务器*/
module:{}, // 模块配置
plugins:[
// 打包html插件
+ new CleanWebpackPlugin(['./build']),//清除build下的所有文件
+ new HtmlWebpackPlugin({
filename:'a.html',
template:'./src/index.html',
title:'新生成的html的title',
hash:true
// minify:{
// removeAttributeQuotes:true,//移除生成的html文件中的无用引号
// collapseWhitespace:true//移除生成的html文件中的无用空格
// }
})
],
mode:'development', // 可以更改模式
resolve:{}, // 配置解析
}
6.对于多页面应用自动产出html的处理（多入口，多出口）
- 关键点
- 入口配置
- 出口配置
- HtmlWebpackPlugin插件的chunks配置
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry:{ // 多入口 多出口
index:'./src/index.js',
a:'./src/a.js'
},
output:{
filename:'[name].[hash:8].js',
path: path.resolve('./build')
},
devServer:{
contentBase:'./build',
port:3000,
compress:true,
open:true
},
module:{},
plugins:[
new CleanWebpackPlugin(['./build']),
new HtmlWebpackPlugin({
filename:'a.html',//在./build目录下生成一个a.html
template:'./src/index.html',
title:'',
hash:true,
chunks: ['index']//生成的a.html中引入index.js出口打包后的带hash的js文件
}),
new HtmlWebpackPlugin({
filename:'b.html',//在./build目录下生成一个b.html
template: './src/index.html',
title: '',
hash: true,
chunks:['a']//生成的b.html中引入a.js出口打包后的带hash的js文件
})
],
mode:'development',
resolve:{},
}
生成的b.html引入a.1c103022.js
生成的a.html引入index.1c103022.js
image.png
7.用loader加载css文件
因为webpack只识别js，所以css文件和图片等都需要用加载器进行编译。
- 一般的css处理（将js中引入的css文件当做行内样式尽心引入）
安装 npm i style-loader css-loader -D
配置加载器 :
module: {
rules:[
{
test:/\.css$/,//匹配所有的以.css结尾的文件
use:['style-loader','css-loader'],//使用加载器
include:path.join(__dirname,'./src'),//处理这个文件夹下的文件
exclude:/node_modules/,//不处理这个文件夹下的文件
}
]
},
index.js中引入./index.css: import './index.css'; 打包解析后的页面结构:
image.png
8.编译less 和 sass
安装：
npm i less less-loader -D
npm i node-saas sass-loader -D
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" //将 CSS 转化成 CommonJS 模块
}, {
loader: "less-loader" // 将 less编译成 CSS
}]
},//sass解析方式和less一致
]
}
9.把编译的样式抽离成单独的css文件（extract-text-webpack-plugin）
以上的编译方式会把所有的样式都写到html文件的行内样式，会显得html文件过于臃肿，所以需要把css分离出来(改为在html文件中用link引入)
- css 文件抽离插件配置
安装：npm install --save-dev extract-text-webpack-plugin
引入：let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
配置
{//编译并抽离引入的css文件
test:/\.css$/,
use: ExtractTextWebpackPlugin.extract({
use:'css-loader'
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
{//编译并抽离引入的less文件
test: /\.less$/, use: ExtractTextWebpackPlugin.extract({
use:[
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
...
plugins: [
new ExtractTextWebpackPlugin('css/index.css'),//抽离成一个文件
]
10.处理CSS3属性前缀
- 为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀
- Trident内核：主要代表为IE浏览器, 前缀为-ms
- Gecko内核：主要代表为Firefox, 前缀为-moz
- Presto内核：主要代表为Opera, 前缀为-o
- Webkit内核：产要代表为Chrome和Safari, 前缀为-webkit
- 配置
- 安装：npm i postcss-loader autoprefixer -D
- 新建postcss.config.js ：
module.exports={
plugins:[require('autoprefixer')]
}
- webpack.config.js配置
const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')//引入抽离的插件
.....
{
test:/\.css$/,
use: cssExtract.extract({
use:['css-loader','postcss-loader']//使用postcss-loader加载器补全前缀
}),
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
.....
plugins: [
new ExtractTextWebpackPlugin('css/index.css'),//抽离成css/index.css
]
当引入公共css时，或者bootstrap这种css文件时，好多的样式是用不到的，所以需要把多余的样式删掉，简化代码。
11.删除没用的css样式（purifycss-webpack）
安装：npm i purifycss-webpack -D
引入：let PurifycssWebpack = require('purifycss-webpack');
let glob = require('glob');//匹配路径的模块
配置：
// 没用的css会被消除掉，一定放在htmlwebpackPlugin后面
new PurifycssWebpack({
paths:glob.sync(path.resolve('src/*.html'))//匹配所有的src下的html文件，删除多余的样式
})
12.编译图片
配置完 css样式，less，sass抽离、压缩、加前缀等，接下来要处理关于图片的问题。
- file-loader 解决CSS等文件中的引入图片路径问题
- url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
安装
npm i file-loader url-loader -D
入口文件js引入图片
用 require：
let userImg=require('./images/userImg.png')
console.log(userImg)//base64格式的乱码
let img=new Image();
img.src=userImg;
document.body.appendChild(img);
处理打包后图片路径问题
const PUBLIC_PATH='/';
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath:PUBLIC_PATH //打包后访问资源的基准路径
},
配置：
{
test:/\.(jpg|png|gif|svg)$/,
use:'url-loader',
include:path.join(__dirname,'./src'),
exclude:/node_modules/,
options: {
limit: 1024,//小于1M编码成base64方式引入图片
outputPath:'images/'//指定打包后的图片位置
}
}
在HTML文件中引入图片的情况处理
安装：
npm i html-withimg-loader -D
html中引入
<img src="./images/logo.png" alt="logo.png">
webpack.config.js中的配置
{
test:/\.(html|html)$/,
use:'html-withimg-loader',
include:path.join(__dirname,'./src'),
exclude:/node_modules/
}
13.热替换（改哪个文件就自动刷新哪个文件，不用所有文件都重新打包，节约性能和时间）
devServer: {
contentBase: './build',
port: 3000,
compress: true,
open: true,
+ hot: true//开启热替换
},
plugins:[
+ new webpack.HotModuleReplacementPlugin(),//配置热替换的插件
]
入口文件js的配置
在入口js文件的最后，添加以下代码
if(module.hot){
module.hot.accept();
}
14.转义ES6/ES7/JSX （Babel）
安装
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D
配置
{
test:/\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ["env","stage-0","react"]
}
},
include:path.join(__dirname,'./src'),
exclude:/node_modules/
},
其中一般情况会把配置文件拿出来。像这样：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
}
]
}
新建.babelre文件
{
"presets": ["es2015", "stage-2",["env", { "modules": false }]],
"plugins": ["transform-runtime"],
"comments": false
}
jsx语法处理（jsx-loader）
module.exports ={
entry: './entry.js',
output: { path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.js$/, loader: "babel", exclude: /node_modules/},
{test: /\.jsx$/, loader: "jsx-loader"}
{test: /.css$/, loader: 'style!css'} ]
}
};
新建.babelrc的文件
{
"presets": ["es2015","react"],
"plugins":["antd"]
}
16.resolve解析
1.自动添加扩展名进行匹配 (extension)
指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
resolve: {
//自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
extensions: [" ",".js",".css",".json"],
},
2.配置别名(alias)
每当引入jquery模块的时候，它会直接引入jqueryPath,而不需要从node_modules文件夹中按模块的查找规则查找
resolve:{
alias:{
jquery:"./lib/jquery/jquery.js"
}
}
//在入口文件 中直接引入 jquery（require('jquery')）即可 不用再加那么多的路径
17. 如何调试打包后的代码
webapck通过配置可以自动给我们source maps文件，map文件是一种对应编译文件和源文件的方法
- source-map 把映射文件生成到单独的文件，最完整最慢
- cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
- eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
- cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列
devtool:'eval-source-map'
18. 区分环境变量
许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用 webpack 内置的 DefinePlugin 为所有的依赖定义这个变量：
npm install cross-env -D
"scripts": {
+ "build": "cross-env NODE_ENV=production webpack --mode development",
"dev": "webpack-dev-server --open --mode development "
},
plugins: [
+ new webpack.DefinePlugin({
+ NODE_ENV:JSON.stringify(process.env.NODE_ENV)
+ }),
if (process.env.NODE_ENV == 'development') {
console.log('这是开发环境');
} else {
console.log('这是生产环境');
}
vue项目的webpack处理
安装vue-loader vue-template-compiler
-vue-loader 解析.vue文件的，vue会自动的调用vue-template-compiler，只需要配置vue-loader即可
-vue-template-compiler用来解析vue模板的
配置
module: {
rules: [
...
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
}
}
...
]
}
基于以上一个完整的webpack配置
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html插件
let CleanWebpackPlugin = require('clean-webpack-plugin');//清除文件插件
let webpack = require('webpack');
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');//抽离css文件
module.exports = {
entry: './src/index.js',//入口文件
output: {
filename: '[name].[hash:8].js',//出口文件名字（带有hash值的）
path: path.resolve('./build')//出口文件路径
},
devServer: {
contentBase: './build',//资源查询根目录
host:'localhost',//webpack服务监听主机
port: 3000,//webpack服务监听端口
compress: true,// 服务器压缩
open: true,//打包后自动打开浏览器
hot: true//开启模块热替换
},
plugins: [
new ExtractTextWebpackPlugin({
filename:'css/index.css'//抽离文件名
}),
new webpack.HotModuleReplacementPlugin(),//引入模块热替换插件
new CleanWebpackPlugin(['./build']),//每次打包前自动清除build文件夹下的内容
new HtmlWebpackPlugin({//自动生成html文件配置
template: './src/index.html',//生成的html文件的模板
title: 'title',//生成的html文件的标题
hash: true,//生成的html文件引入打包后的js是带hash值的（避免缓存）
// minify:{
// removeAttributeQuotes:true,//生成的html文件去掉没用的引号
// collapseWhitespace:true//生成的html文件去掉没用的空格
// }
}),
new webpack.DefinePlugin({//区分环境变量
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
],
mode: 'development',//mode可以更改模式(此处代表开发模式)
resolve: {
alias:{
jquery:"./lib/jquery/jquery.js"//引入jquery直接使用jQuery即可，不用在写全路径。
}
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',//处理es6
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,//编译图片
loader: 'file-loader',
options: {
limit: 1024,//小于1M编码成base64方式引入图片
outputPath:'images/'//指定打包后的图片位置
}
},
{
test: /\.css$/, use: cssExtract.extract({//编译css文件（并抽离出去）
use: [
{ loader: 'css-loader' },
{ loader:'postcss-loader']}//给css的样式加前缀
]
})
},
{
test: /\.less$/, use: LessExtract.extract({//编译less文件（并抽离出去）
use:[
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
},
]
},
}
.babelrc文件
{
"presets": ["react", "env"],
"plugins": []
}
postcss.config.js
module.exports={
plugins:[require('autoprefixer')]
}
入口文件。。。。
import './index.css';//引入css
let userImg=require('./userImg.jpg')//引入图片
if(module.hot){//热替换代码
module.hot.accept();
}
package.json文件
{
"name": "webpack-public",
"version": "1.0.0",
"description": "WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhufengzhufeng/webpack-public5.4.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/zhufengzhufeng/webpack-public5.4/issues"
},
"homepage": "https://github.com/zhufengzhufeng/webpack-public5.4#readme",
"devDependencies": {
"autoprefixer": "^8.4.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"glob": "^7.1.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.2",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.0",
"postcss-loader": "^2.1.5",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.7.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.4"
}
}
index.html文件模板
//页面只需要一个div即可
<div id='app'></div>
