什么是 webpack
webpack
可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript
模块以及其他的一些浏览器不能直接运行的扩展语言(Scss
,TypeScript
等),并将其转换和打包为合适的格式供浏览器使用
使用 webpack 前的准备
npm init
:创建一个package.json
文件。它是标准的npm
说明文件,包括当前项目的依赖模块、自定义的脚本任务等cnpm install webpack --save-dev
:安装webpack
文件目录的构建方面:一般由两个目录构成:
app
(存放原始数据和JS
模块),public
(存放供浏览器读取的文件,即webpack
打包生成的文件,和html
源代码)创建根目录下
webpack.config.js
文件,这是webpack
的配置文件,基本的配置如下:
module.exports = {
entry: __dirname + "/app/main.js", // 已多次提及的唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
}
};
‘__dirname’是 node.js 中的全局变量,它指向当前执行脚本所在的目录
package.json
方面的配置:(配置好后,直接可以在命令行:npm start
即可进行打包编译,需要注意的是,除了 "start"
之外,所有的自定义命令都需要通过 npm run 命令名称
的形式进行)
"scripts": {
"start": "webpack"
}
webpack 提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,更容易调试。
module.exports = {
// 小到中型的项目中,eval-source-map 是一个很好的选择
devtool: 'eval-source-map', // 注意:只应该在开发阶段使用它
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
};
正式书写代码时,通过 module.exports
的方式进行模块的导出,通过 require
的方式进行模块的导入
同时建立多个入口文件:
module.exports = {
// 可以同时定义多个入口文件
entry: {
'index': __dirname + '/app/main.js',
'indexT': __dirname + '/app/main2.js'
},
output: {
path: __dirname + '/build',
filename: '[name]-[hash].js' // 定义多个出口文件时的命名
},
}
使用 webpack 构建本地服务器
cnpm install webpack-dev-server --save-dev
:安装 webpack-dev-server
在 webpack.config.js
中进行配置
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 // 实时刷新
}
};
之后,在 package.json 中的 scripts 对象添加命令,方便开启本地服务器:
"server": "webpack-dev-server --open"
此时,通过在终端输入:npm run server
就可以本地的 8080 端口查看结果
Loaders
通过使用不同的 loader
,webpack
有能力调用外部的脚本或者工具,实现对不同格式的文件的处理
如分析转换 scss
为 css
,把 ES6
,ES7
转为现代浏览器兼容的 JS
文件等等
Loaders
需要单独安装并且需要在 webpack.config.js
中的 modules
关键字下进行配置,配置包括以下方面:
1. test
:一个用以匹配 loaders
所处理文件的扩展的正则表达式(必须!)
2. loader
:loader
的名称(必须!)
3. include
/ exclude
:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选)
4. query
:为 loaders
提供额外的设置选项(可选)
Babel
Babel
:其实是一个编译 JavaScript
的平台,它可以编译 ES6
,ES7
,基于 JavaScript
的扩展语言:React
的 JSX
,TypeScript
等等
Babel
是几个模块化的包,其核心功能位于称为 babel-core
的 npm
包中,对于每个我们需要的功能或扩展,都需要单独安装响应的包,如:
- 解析 ES6
的 babel-env-preset
包
- 解析 JSX
的 babel-preset-react
包
安装他们:cnpm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
cnpm install react react-dom --save
在 webpack.config.js
中配置 Babel
:
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
配置完成后,就可以使用 ES6
以及 JSX
语法了
关于 Babel 的配置
babel
具有非常多的配置选项,可以将它的配置单独放在 .babelrc
的配置文件中(webpack
会自动调用 .babelrc
里的 babel
配置选项)
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
// 以下放到 .babelrc 中
// options: {
// presets: [
// "env", "react"
// ]
// }
},
exclude: /node_modules/
}
]
}
在 .babelrc
中:
{
"presets": ["react", "env"]
}
一切皆模块
webpack
的特殊优点是,它把所有的文件都当做模块处理,JavaScript
、CSS
、fonts
、图片等等,通过合适的 loader
都可以被处理
1. CSS 的处理
css-loader
:能够使用类似@import
和url(...)
的方法实现require()
的功能style-load
:将所有计算后的样式加入到页面中
两者组合在一起能够把样式表嵌入到
webpack
打包后的JS
文件中
安装他们:cnpm install style-loader css-loader --save-dev
在 webpack.config.js 中配置使用:
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
注意这里对同一个文件引入多个 loader 的方法
之后,只需将对应的 CSS
文件,通过 require
导入到入口文件 main.js
中就可以使用共同打包
2. CSS module
CSS modules
意在把 JS
的模块化思想带入 CSS
中,通过 CSS
模块,所有的类名,动画名默认都只作用于当前模块,这样可以有效的避免全局污染,配置如下:(在 webpack.config.js
中进行配置)
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
}
]
}
// 使用cssModule添加类名的方法
<div className={styles.root}>
3. CSS 预处理器
对于 Sass、Less 之类的预处理器可以在 webpack 使用相关的 loaders 进行配置:
1. Less Loader
2. Sass Loader
3. Stylus Loader
不过其实也存在一个 CSS 的处理平台 -PostCSS,它的其中一个功能是为 CSS 代码自动添加使用不同浏览器的 CSS 前缀
安装他们:cnpm install postcss-loader autoprefixer --save-dev
其中,autoprefixer
是自动添加前缀的插件。之后再 webpack 配置文件中添加 postcss-loader:
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader" // 添加 postcss-loader
}
]
}
4. 对图片的打包
图片需要使用 url-loader 来加载,安装:cnpm install url-loader --save-dev
使用:
{
test: /(\.png|\.jpg)$/,
// 小于8kb的图片不会被处理
use: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
}
插件(Plugins)
插件是用来扩展 webpack 功能的,他们会在整个构建过程中生效,执行相关的任务
Loaders 和 Plugins 的区别:
- loaders 是在打包构建过程中用来处理源文件的(JSX,Scss,Less…),一次处理一个
- 插件并不直接操作单个文件,它直接对整个构建过程起作用
1. 使用插件的方法
使用哪个插件,就通过 npm
来进行安装,之后再 webpack.confign.js
中的 plugins
关键字部分添加该插件的一个实例
2. 常用的插件之:HtmlWebpackPlugin
该插件的作用:依据一个简单的 html 模板,生成一个自动引用打包后的 JS 文件的新的 index.html,这在每次生成的 JS 文件名称中带有 hash 值时非常有用(因为每次名称不同)
安装他们:cnpm install html-webpack-plugin --save-dev
之后,需要对项目进行一些更改:
删除
public
文件夹,利用此插件html
文件会自动生成,前面操作的JS
文件也会自动关联到生成的新html
文件中在 app 目录下,创建的 html 模板以这种格式创建:
名称.tmpl.html
,插件会根据这个模板生成最终的 html 页面,并会进行自动的依赖更新 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' // 打包后的文件
},
// 启动服务器:webpack-dev-server --open
devServer: {
contentBase: './public',//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
// 关于 Babel 的配置,可以单独在 .babelrc 中进行配置
module: {
rules: [
// Babel 的一些简单配置
// 下载的依赖包:babel-core babel-loader babel-preset-env babel-preset-react react react-dom
// 配置好后就可以使用 react 语法了
{
test: /(\.jsx|\.js)$/, // 处理的文件
use: {
loader: 'babel-loader', // 使用的 loader
// 在 .babelrc 中进行配置
// options: {
// presets: [
// 'env', 'react'
// ]
// }
},
// 不需要处理的文件夹
exclude: /node_modules/
},
// 安装 postcss-loader 和 autoprefixer
// PostCSS 代码自动添加使用不同浏览器的 CSS 前缀
// autoprefixer 自动添加前缀的插件
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
}, {
loader: 'css-loader',
// css模块:所有的类名,动画名都只作用于当前模块,避免全局污染
options: {
modules: true, // 指定启用css modules
// 指定css的类名格式
// localIdentName: '[name]__[local]--[hash:base64:5]'
}
}, {
// 需要新建 postcss.config.js 文件进行其他配置
loader: 'postcss-loader'
}
]
}
]
},
plugins: [
// 添加版权的插件
new webpack.BannerPlugin('版权所有,翻版必究'),
//new 一个这个插件的实例,并传入相关的参数
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html'
})
]
};
之后,正常的在终端执行:npm start
就可以进行新一轮的打包编译了
3. 常用的插件之:Hot Module Replacement
Hot Module Replacement
(HMR
)插件允许在修改组件代码后,自动刷新实时预览修改后的效果
它是 webpack
里的一个插件
如何配置:
1. 在 webpack.config.js
中添加 HMR
插件
2. 在 webpack Dev Server
中添加 “hot
” 参数
3. 配置结束后,在 JS
模块中执行一个 webpack
提供的 API
才能实现热加载
思路:
1. Babel
和 webpack
是两个独立的工具
2. 两者可以一起工作的同时,都可以通过插件扩展功能
3. HMR
是一个 webpack
插件,想让他工作,还需要对模块进行额外的配置
4. Babel
中有一个 react-transform-hmr
插件,可以让 HMR
正常工作,而且不产生对模块的额外配置影响
在 webpack.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' // 打包后的文件
},
// 启动服务器:webpack-dev-server --open
devServer: {
contentBase: './public', // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true, // 实时刷新
hot: true // 配合 HMR 实现热加载
},
plugins: [
// 热加载插件,还需要在 .babelrc 中的 "env" 进行配置
new webpack.HotModuleReplacementPlugin()
]
};
安装: cnpm install babel-plugin-react-transform react-transform-hmr --save-dev
在 Babel 中的配置:
{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"] }]
}]]
}
}
}
配置完成之后,就可以在使用 React 时,进行热加载模块了
产品阶段的构建
产品阶段:主要是对打包的文件进行额外处理,如压缩、优化、缓存,分离 CSS
和 JS
等
创建一个 webapck.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() //热加载插件
],
};
package.json 文件也需要配置:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open",
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
},
优化插件
webpack 提供了一些优化插件,产品发布阶段所需的功能:
OccurenceOrderPlugin
:为组件分配ID
,通过分析和优先考虑使用最多的模块,并未他们分配最小ID
UglifyJsPlugin
:压缩JS
代码ExtractTextPlugin
:分离CSS
和JS
文件
上面的插件中,OccurenceOrderPlugin
和 UglifyJsPlugin
是内置插件,需要下载的只有:ExtractTextPlugin
:
cnpm install extract-text-webpack-plugin --save-dev
之后再 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: 'null', //注意修改了这里,这能大大压缩我们的打包代码
devServer: {
contentBase: './public', //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true,
hot: true
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: 'babel-loader'
},
exclude: /node_modules/
}, {
test: /\.css$/,
// 分离 CSS,成为一个单独的文件
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader'
]
})
}]
},
plugins: [
new webpack.BannerPlugin('朋友们注意版权哦~~'),
new HtmlWebpackPlugin({
template: __dirname + '/app/index.tmpl.html', //new 一个这个插件的实例,并传入相关的参数
// 压缩HTML文件
minify: {
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true // 删除空白符与换行符
}
}),
// 为组件分配 ID,通过这个插件可以优先考虑使用最多的模块,分配给他们最小的 ID
new webpack.optimize.OccurrenceOrderPlugin(),
// 压缩 JS 文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
}),
// 分离 CSS 和 JS 文件
new ExtractTextPlugin('style.css')
],
};
之后再终端执行:npm run build
就可以进行产品阶段的打包了
缓存
使用这种方式:
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js" // 添加 hash 值
},
添加 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
})
]