官网:https://www.webpackjs.com/concepts/
安装:
- npm install webpack -g // 全局安装
- npm install webpack –save-dev // 局部安装
注:最好在全局安装后根据项目package.json中webpack的版本再局部安装对应的webapck
四个核心概念:
- 入口(entry)
- 输出(output)
- Loader (JS库)——因为webpack模块化的概念,除了JS和JSON文件,css、图片等不能被读取,必须下载loader去加载。
- 插件(plugins)
Webpack 1 和webpack 3 的区别:w1只能加载js,w3可以加载js和json。
1、webpack是一个模块打包器(bundler);
在webpack看来,前端的所有资源文件(js/json/css/img/less….)都会作为模块处理,它将根据模块的依赖关系进行静态分析,生成对应的静态资源。
2、loader
webpack本身只能加载js/json模块,如果要加载其他类型文件(模块),就需要使用对应的loader进行转换/加载;
loader本身是一个函数,接受源文件作为参数,返回转换的结果;
loader一般以xxx-loader的方式命名,xxx代表了这个loader要做的转换功能,比如json-loader。
3、配置文件(默认)
webpack.config.js:是一个node模块,返回一个json格式的配置信息对象。
4、插件
插件可以完成一些loader不能完成的功能;
插件的使用一般是在webpack的配置信息plugins中指定;
CleanwebpackPlugin:自动清除指定文件夹资源;
HtmlwebpackPlugin:自动生成HTML文件;
UglifyJSPlugin:压缩js文件。
webpack.config.js
- 入口(entry)、输出(output) __dirname是nodejs的内置属性
- 在 webpack 的配置中 loader 有两个目标:
test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。(正则表达式,$——以…结尾)
use 属性,表示进行转换时,应该使用哪个 loader。
对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:test 和 use
- 使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中
可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例
- 模式:提供 mode 配置选项,告知 webpack 使用相应模式的内置优化
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化
const path = require('path');
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
mode: 'production',
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' },
{ test: /\.css$/, use: 'css-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
url-loader
npm install --save-dev url-loader
url-loader
功能类似于 file-loader
,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
limit
:
8192 //限制图片大小为8kb
url-loader会将小于8kb的图片转换为base64打包放在js文件中;大于8kb的图片会放在对应文件夹下。
注:bsae64和图片间可以相互转换还原,所以不安全。可使用Md5、哈希加密
发现问题:经常会出现报错大于8kb的图片加载不到,原因:打包后目标路径不对。
解决方案:
- 在 webpack.config.js文件的output中添加publicPath属性,定义公共路径;——该属性具有强制性,在使用热加载webpack-dev-server时会出现报错(publicPath和webpack-dev-server不要同时使用)尽量不要使用publicPath;
- 或移动文件位置。
module.exports = {
mode: 'production',
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
publicPath: "js/" //不建议使用,具有强制性对后续加载资源有影响,影响“热加载”
}
};
css-loader
与style-loader结合使用
解释(interpret) @import
和 url()
,会 import/require()
后再解析(resolve)它们
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
注意:css-loader只负责加载css模块,不能将样式应用到style标签中;style-loader可以将样式添加到style标签中让样式生效。
自动编译打包 webpack-dev-server ——热加载
提供了一个简单的 web 服务器,并且能够实时重新加载
npm install --save-dev webpack-dev-server
webpack配置:
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devServer: {
contentBase: './dist' //默认服务于index.html
}
};
以上配置告知 webpack-dev-server
,在 localhost:8080
下建立服务,将 dist
目录下的文件,作为可访问文件。若不设置contentBase: './dist' 将会打开项目目录。
注意:因为有了webpack-dev-server
(
热加载
,保存后自动编译),就不会出现图片大于
8kb
找不到路径的情况。服务器会自动在
/dist
目录下去找,服务器有内置的帮助矫正路径的库。
添加一个 script 脚本,可以直接运行开发服务器(devserver):
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack-dev-server --open",
"build": "webpack"
}
使用webpack插件
常用插件:
- 使用html-webpack-plugin根据模版html生成引入script的页面
- 使用clean-webpack-plugin清除dist文件夹
npm install --save-dev html-webpack-plugin
该插件将为你生成一个 HTML5 文件, 其中包括使用 script
标签的 body 中的所有 webpack 包。 只需添加插件到你的 webpack 配置如下:
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
这将会产生一个包含以下内容的文件 dist/index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
如果你有多个 webpack 入口点, 他们都会在生成的HTML文件中的 script
标签内。
plugins: [
new HtmlWebpackPlugin({template: ‘./index.html’}),
new CleanWebpackPlugin([‘dist’])
]
new
HtmlWebpackPlugin({template: ‘./index.html’})表示根据index.html模版页生成新的页面,并且为新生成的页面添加script标签
new
CleanWebpackPlugin([‘dist’]) 删除指定目录下的所有资源