1 为什么用webpack
模块化
2 什么是webpack
模块打包机 分析结构,找到JS模块,将浏览器不能直接运行的语言转化为可以用的语言
3 与Grant和Gulp
Grant和Gulp 是优化前端开发流程的工具, 在一个配置文件中指明对某些文件进行操作,之后工具完成这些操作
webpack是模块化解决方案 把项目看作整体,通过给定的主文件,找到项目的依赖文件,使用loader处理他们,最后打包成一个或者多个浏览器认识的JS文件
4 开始使用
npm i -g webpack //全局安装
npm i --save-dev webpack //安装到项目目录下
package.json 标准的npm说明文件 项目依赖和自定义脚本等 npm init 自动创建这个文件 练习的时候,不要把name 叫做webpack,否则无法安装webpack
创建两个文件夹 app 存放原始数据和将要些的JS模块 public 存放供浏览器读取的文件,包括 webpack打包的JS和index.html
创建3个文件
index.html ->public
Greeter.js -> app
main.js -> app
在index中写入最基础的html代码,用于引入打包之后的JS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
在Greeter中,定义一个函数,Commonjs 规范导出这个模块
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
在mainjs中
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
# {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}
webpack app/main.js public/bundle.js
以上时在终端进行操作的
通过配置文件来使用webpack
新建文件webpack.cnofig.js
module.exports = {
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}
注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
有了这个配置文件,那么在终端余宁webpack命令就行了,前提时全局安装webpack
更快捷的执行打包任务
可以对npm进行简单的配置,利用npm start 代替
在package.json中,对scripts对象进行相关设置
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
注:package.json
中的script
会安装一定顺序寻找命令对应位置,本地的node_modules/.bin
路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。
webpack的强大功能
生成Source Maps
打包后的文件,不容易找到出错的地方,Source Maps解决这个问题
devtool选型 | 配置结果 |
source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map ,但是它会减慢打包速度; |
cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map ,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便; |
eval-source-map | 使用eval 打包源文件模块,在同一个文件中生成干净的完整的source map 。这个选项可以在不影响构建速度的前提下生成完整的sourcemap ,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项; |
cheap-module-eval-source-map | 这是在打包文件时最快的生成source map 的方法,生成的Source Map 会和打包后的JavaScript 文件同行显示,没有列映射,和eval-source-map 选项具有相似的缺点; |
从上到下,打包速度悦来越快
对小到中型的项目中,eval-source-map
是一个很好的选项,再次强调你只应该开发阶段使用它,我们继续对上文新建的webpack.config.js
,进行如下配置:
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
使用webpack构建本地服务器
在配置之前安装依赖
npm install --save-dev webpack-dev-server
配置选项如下
配置选项 | 功能描述 |
contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录) |
port | 设置默认端口,省略则默认8080 |
inline | 设置为true,源文件改变时,自动刷新页面 |
historyApiFallback | 开发但也面应用,依赖html5 history API ,设置为true 所有跳转指向index.html |
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
loaders
实现对不同的文件进行处理,例如将sass less转化为css,将ES67转化为ES5
在webpack.config.js中modules关键字下进行配置,
test 匹配loaders处理文件的拓展名的正则表达式 必须
loader loader的名称 必须
include / exclude 手动添加必须处理或者不用处理的文件 可选
query loaders 额外设置选项
注 由于webpack3.*/webpack2.*
已经内置可处理JSON文件,这里我们无需再添加webpack1.*
需要的json-loader
。在看如何具体使用loader之前我们先看看Babel是什么?
babel
babel时一个JS平台,可以帮助你编译代码,让你可以使用最新的JS代码,不用管浏览器是否支持
安装和设置
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
};
一切皆模块
css
css-loader 使用类似@import 和 url(....) 实现 require ()功能
style-loader 将所有计算后的功能加入页面中,二者组合在一起,把样式表嵌入打包后的JS文件夹中
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
};
请注意这里对同一个文件引入多个loader的方法。
css预处理器
sass less stylus postcss
使用postcss 自动添加适应不同浏览器的css前缀
首先安装 postcss-loader autoprefixer (自动添加前缀的插件)
npm install --save-dev postcss-loader autoprefixer
接下来,在webpack.config.js中添加postcss-loader,在根目录新建postcss.config.js
//webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
}
}
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
插件 Plugins
要使用某个插件,需要嫌安装它,然后在webpack配置中添加一个实例,plugins是一个数组。
一个添加版权声明的插件例子
const webpack = require('webpack');
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究')
],
};
HtmlWebpackPlugin
这个插件是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新的index.html,在每次生成的JS文件名不同时非常有用
npm install --save-dev html-webpack-plugin
这个插件自动完成了我们之前手动做的一些事情,在正式使用之前需要对一直以来的项目结构做一些更改:
- 移除public文件夹,利用此插件,
index.html
文件会自动生成,此外CSS已经通过前面的操作打包到JS中了。- 在app目录下,创建一个
index.tmpl.html
文件模板,这个模板包含title
等必须元素,在编译过程中,插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,index.tmpl.html
中的模板源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
3.更新
webpack
的配置文件,方法同上,新建一个
build
文件夹用来存放最终的输出文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
})
],
};
Hot Module Replacement
HMR,允许修改代码后,自动刷新预览修改后的效果需要配置两项:1webpack配置文件中添加HMR插件 2webpack-dev-server 添加hot参数
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: 'null', //注意修改了这里,这能大大压缩我们的打包代码
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true,
hot: true
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}],
})
}]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
}),
new webpack.HotModuleReplacementPlugin() //热加载插件
],
};
注意: 如果是window电脑,
build
需要配置为
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
.谢谢评论区简友提醒。
优化插件
OccurenceOrderPlugin
:为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的IDUglifyJsPlugin
:压缩JS代码;ExtractTextPlugin
:分离CSS和JS文件
npm install --save-dev extract-text-webpack-plugin
// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: 'none',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,
hot: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
],
};
缓存
缓存在哪里都有,使用缓存最好的方法是保证你的文件和文件内容是匹配的。 即 内容改变,名称也应该相应改变webpack可以把一个哈希值添加到打包的文件名中,使用方法如下,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
..
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
...
};
去除build
文件中的残余文件
添加了hash
之后,会导致改变文件内容后重新打包时,文件名不同而内容越来越多,因此这里介绍另外一个很好用的插件clean-webpack-plugin
。安装:
cnpm install clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require("clean-webpack-plugin");
plugins: [
...// 这里是之前配置的其它各种插件
new CleanWebpackPlugin('build/*.*', {
root: __dirname,
verbose: true,
dry: false
})
]