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
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
})
]
4429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
