webpack
是一款模块加载器兼打包工具,它能够把各种资源,例如js(含JSX)、样式(含less/sass)、图片等都作为模块来使用和处理。
1.简介
Webpack
是一个模块打包器。根据模块的依赖关系进行静态分析,然后按照指定的规则将这些模块生成对应的静态资源。
相比于 gulp
、grunt
等构件工具,WebPack
是一种模块化的解决方案,适合一些前后端分离项目的的场景,模块间依赖不强,
而 gulp
等工具侧重于资源压缩和自动化的构建,目前大型项目的开发,可以结合两者,协同工作。
2.Webpack
的特点
-
代码拆分
Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。 -
Loader
Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。 -
智能解析
Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + “.jade”)。 -
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。 -
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率,这使得 Webpack 能够以令人难以置信的速度快速增量编译。
参考:W3Cschool
3.安装使用
3.1.安装
(1)、确保已安装 Node.js
环境,使用 npm
安装:
npm install webpack -g
(2)、在项目目录,进行初始化:
npm init
# 此时会生成 package.json
(3)、安装 webpack
依赖:
npm install webpack --save-dev
(4)、安装 Webpack
开发工具:
npm install webpack-dev-server --save-dev
3.2.简单使用
新建一个简单的项目 hello-world
,目录结构如下:
(1)、index.html
内容如下:
<!DOCTYPE html>
<html>
<head>
<title>Webpack test</title>
</head>
<body>
<div align="center">
<h2><font color="blue">This is a test</font></h2>
<span>Hello Webpack!</span>
<h6>----------------------------------------</h6>
</div>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>
(2)、module.js
和 test.js
内容如下:
// module.js
module.exports = '<div align="center"><h4>It works from module.js.</h4></div>'
// test.js
document.write(require('./module.js')) // 添加模块
document.write('<div align="center"><h3>webpack`s work is done.</h3></div>')
(3)、package.json
内容如下:
{
"name": "hello-world",
"version": "1.0.0",
"description": "webpack test",
"main": "test.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack test.js bundle.js"
},
"author": "Mr. Yao",
"license": "ISC",
"devDependencies": {
"webpack": "^4.42.1"
},
"dependencies": {}
}
(4)、新建 webpack.config.js
文件:
module.exports = {
// 入口文件
entry: __dirname + "/test.js", //
// 输出文件
output: {
path: __dirname + "/",
filename: "bundle.js" //打包后的输出文件名
},
mode: 'development'
}
(5)、运行打包命令:
npm run dev
页面显示:
4.Webpack
核心
核心概念:
- 入口(entry):指示 webpack 应该使用哪个模块,以及模块和库是入口起点
- 输出(output):告诉 webpack 在哪里输出它所创建的目标文件,以及如何命名。
- 加载转换(loader):让 webpack 能够去处理其他类型的文件,并将它们转换为可识别的模块
- 插件(plugin):用于执行范围更广的任务(扩展)。包括:打包优化,资源管理,注入环境变量。
- 模式(mode):通过选择 development, production 或 none 之中的一个,来设置 mode 参数
4.1.常用 Loader
- 样式:
css-loader
、style-loader
、less-loader
、sass-loader
等
scss
样式处理
// webpack.config.js
{
// ...
module: {
rules: [
{
test: /\.scss$/,
use:[
{loader:'style-loader'},
{loader:'css-loader',options:{sourceMap:true,modules:true}},
{loader:'sass-loader',options:{sourceMap:true}}
],
exclude:/node_modules/
}
]
}
// ...
}
postcss-loader/autoprefixer
: 浏览器兼容考虑,将前缀补充交由webpack
完成
// postcss.config.js
module.exports = {
plugins: [
// 需要使用的插件列表
require('autoprefixer'),
]
}
// webpack.config.js
{
// ...
module:{
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
// ...
]
},
// ...
}
- 文件:
raw-loader
、file-loader
、json-loader
、url-loader
等 - 编译:
babel-loader
、coffee-loader
、ts-loader
等 - 校验:
mocha-loader
、jshint-loader
、eslint-loader
等
4.2.常用 plugin
在配置文件 webpack.config.js
中,plugins
是一个插件组成的数组。 数组中的插件对象是插件new出来的实例。
用法:
plugins:[plugin1,plugin2, ...]
e.g.:
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './public/index.html'})
]
4.2.1.HTML文件生成插件(html-webpack-plugin)
作用:HtmlWebpackPlugin 在此可以用于自动重新生成一个index.html或依据模板生成,帮你把所有生产的js文件引入到html中,最终生成到output目录。
安装:
npm install --save-dev html-webpack-plugin
配置:
//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
favicon: '', // 指定页面的图标
inject: '', // 引入模板的注入位置(true/false/body/head)
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
caseSensitive: false, // 是否大小写敏感
minifyCSS: true // 压缩内联css
},
template: 'index.html', // 模板来源html文件
filename: 'index.html' // 生成的模板文件名
})
]
4.2.2.图片压缩插件(imagemin-webpack-plugin)
作用:批量压缩图片。
安装:
npm install --save-dev imagemin-webpack-plugin
配置:
//引入插件
var ImageminPlugin = require('imagemin-webpack-plugin').default;
//配置
plugins: [
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // 开发时不启用
pngquant: {//图片质量
quality: '95-100'
}
})
]
4.2.3.清空文件夹插件(clean-webpack-plugin)
作用:打包前先清空output文件夹。
安装:
npm install --save-dev clean-webpack-plugin
配置:
//引入
const CleanWebpackPlugin = require('clean-webpack-plugin');
//清空dist文件夹
plugins: [
new CleanWebpackPlugin(['public'])
]
4.2.4.删除冗余css插件(purifycss-webpack)
作用:去除冗余的css代码。
安装:
npm install --save-dev purifycss-webpack
配置:
const purifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
// Make sure this is after ExtractTextPlugin!
new purifycssWebpack({
paths: glob.sync(path.resolve('./public/*.html'))
}),
4.2.5.加速代码构建(happypack)
作用:通过多进程模型,来加速代码构建。
安装:
npm install --save-dev happypack
配置:
const os = require('os');
let HappyPack = require('happypack');
let happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
exports.plugins = [
new HappyPack({
id: 'jsx',
threadPool: happyThreadPool,
loaders: [ 'babel-loader' ]
}),
new HappyPack({
id: 'coffeescripts',
threadPool: happyThreadPool,
loaders: [ 'coffee-loader' ]
})
];
exports.module.loaders = [
{
test: /\.js$/,
loaders: [ 'happypack/loader?id=jsx' ]
},
{
test: /\.coffee$/,
loaders: [ 'happypack/loader?id=coffeescripts' ]
},
]
4.2.6.提取公共模块(CommonsChunkPlugin)
作用:提取代码中的公共模块,单独生成一个或多个文件,这样避免在多入口重复打包文件。
配置:
var webpack = require('webpack');
module.exports = {
entry:['index1.js','index2.js'],
plugins: [
new CommonsChunkPlugin({
name:"entry",
filename:"common.js", //忽略则以name为输出文件的名字,否则以此为输出文件名字
minChunks:2, // 最小引用2次
})
]
};
// 把 index1.js,index2.js公用的js抽取出来,打包成单独文件common.js。
4.2.7.js压缩(UglifyJsPlugin)
作用:压缩js文件。
配置:
var webpack = require('webpack');
module.exports = {
entry:['index.js'],
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: VERBOSE,
},
})
]
};
4.2.8.开启服务插件(webpack-dev-server)
作用:可以完成自动刷新、热替换等功能的服务端。
安装:
npm install --save-dev webpack-dev-server
配置:
// package.json
{
// ...
"scripts": {
"dev": "webpack-dev-server --open --hot",
"build": "set NODE_ENV=production && webpack"
},
// ...
}
// webpack.config.js
const path = require(path);
module.exports = {
// ...
plugins: [
new webpack.HotModuleReplacementPlugin() // 热模块替换:只替换更新部分,不会页面重载.
],
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8000,
// inline: false,
hot: true,
}
}
参考:webpack常用插件