—— 踩坑计划第一步
目录一览
webpack3.0学习笔记（一）
webpack3.0学习笔记（二）
webpack3.0学习笔记（三）
前情概要
记录最近 webpack 的学习进展，及使用中的注意事项和踩过的坑，非新手教程欢迎指正错误。
PS. 当前 webpack版本 3.6.0。
webpack
现今许多类库都支持
webpack进行打包管理，vuereact等主流MVVM框架为其疯狂打call。
- 模块化，将大型项目进行分割；
- 支持
TypeScript、CoffeeScript、ES6等语言特性开发的程序运行在当下的主流浏览器上；scss、less、stylus等CSS预处理语言；- ...
webpck配置概览
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
// devtool: 'source-map',
entry: {
main: path.resolve(__dirname,'src/script/main.js'),
aa: path.resolve(__dirname,'src/script/aa.js'),
test: path.resolve(__dirname,'src/script/test.js')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
'less-loader'
]
}),
exclude: [/aa.less$/]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
'less-loader'
]
}),
include: [/aa.less$/]
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new ExtractTextPlugin('css/[name].css'),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/index.html'),
filename: 'index.html',
chunks:['main']
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/aa.html'),
filename: 'aa.html',
chunks: ['aa'],
inlineSource: '.css$'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/test.html'),
filename: 'test.html',
chunks: ['test'],
inlineSource: '.(js|css)$'
}),
new HtmlWebpackInlineSourcePlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
inline: true
}
}
以上呈现了一个多页面基本配置，当然图片资源还没有引入，后续会进行添加，暂时先分析一下现有的配置。
入口 entry 及输出 output 配置
- 单入口可配置为：
entry: 'path.resolve(__dirname,'src/script/main.js')'
或
entry: 'path.resolve([__dirname,'src/script/main.js' , __dirname,'src/script/aa.js'])'
- 而多入口配置为：
entry: {
main: path.resolve(__dirname,'src/script/main.js'),
aa: path.resolve(__dirname,'src/script/aa.js'),
test: path.resolve(__dirname,'src/script/test.js')
},
其中 main aa test 都表示为chunk name，即可将多个入口文件合并成一个 chunk 进行合并打包。
- 多入口对应的输出
output为：
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
filename 若是单入口可设为 js/bundle.js ，多入口则需配置为 js/[name].js 保留原有文件名，也可加入hash及chunkhash进行命名： js/[name]-[hash].js 、js/[name]-[hash].js ，方便生产线打包上线是对用户文件进行缓存更新。
以下是可配置参数：
[hash]：模块标识符(module identifier)的 hash
[chunkhash]：chunk 内容的 hash
[name]：模块名称
[id]：模块标识符(module identifier)
[query]：模块的 query，例如文件名 ? 后面的字符串
ps.单独说一下
entry和output这两个设置中的path属性，官方推荐设置为绝对路径，相对路径的写法容易引发问题，__dirname这个参数是nodejs里自带的，表示当前运行环境的绝对路径，利用path.resolve()转化成一个完整的路径，这里使用path.resolve还是path.join看个人了。
模块热替换 Hot Module Replacement 配置
用webpack不就为了它 npm上有个 live-server 模块也能实现文件的热更新，挺适合非 webpack 项目使用的（不是打广告）。
这里需要两个步骤开启模块热替换功能：
- 第一步
增加webpack.config.js配置，配置本地服务器：
module.exports = {
...
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
inline: true
}
}
contentBase: 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath
将用于确定应该从哪里提供 bundle，并且此选项优先。
historyApiFallback: 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。还可传入对象进一步控制，不多赘述。
hot: 是否开启热替换，毋庸置疑质疑的true。
inline: 将消息输出至控制台还是iframe的选项，开启热替换推荐true。
- 第二步
在webpack.config.js中配置热更新插件：
const webpack = require('webpack')
module.exports = {
...
plugins: {
...
new webpack.HotModuleReplacementPlugin()
}
}
再到 package.json 中配置：
{
"scripts": {
"server": "webpack-dev-server --config webpack.config.js --open"
},
}
在项目根目录执行 npm-run-server即可，输出如下图并无红字报错即成功了。
此时对项目内任何文件进行修改均会执行热替换，实时展示到页面中。
ps. 不推荐在
GitBash中使用live-serverwebpack热替换等，结束后node进程不会自动关闭，一直占用端口还特别卡，得手动到进程管理器里关闭换macOS啊。
loader
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。
babel-loader
Babel 是一个 JavaScript 编译器，能将
ES2015、ES2016、ES2017的语法转义为现代浏览器可执行的代码，所以尽情使用最新的语法特性书写你的代码吧！
首先需要安装babel相关依赖，这里推荐使用 yarn 进行包依赖管理：
yarn add -D babel-loader babel-core babel-preset-env
或使用NPM进行安装：
npm i -D babel-loader babel-core babel-preset-env
babel 的配置写在 webpack.config.js 中：
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
}
}
采用 loader 的普遍配置，写在 rules 里。
test: 书写匹配文件的正则表达式。
use: 对匹配到的文件使用的loader。
exclude: 需要排除不处理的文件，首要排除的就是/node_modules/文件夹，加快打包效率。
include: 指定匹配的文件或目录。
babel 的配置可能会很多，通常都是分离出一个单文件进行配置存储，不写 cli 相关的内容了。
根目录下新建 .babelrc文件，内容如下：
{
"presets": ["es2015"]
}
简单的配置一下兼容 es2015，当然也可以加入 es2016、es2017的支持。
这样 ES6 语法就被转为 ES5 了， ES6 的 import 模块引入已经被 webpack 原生支持了，运行在浏览器端的可以安心使用 ES6 module 模块方法。nodejs 尚未正式支持该语法，仅在8.5版中测试使用。
postcss-loader
PostCSS是一个使用JavaScript插件来转换CSS的工具，是个CSS的插件集合，暂时只用到Autoprefixer解决CSS3样式兼容性问题。
安装命令，顺手把要用到的 css-loader style-loader 一起装了：
yarn add -D postcss-loader css-loader style-loader
或使用NPM进行安装：
npm i -D postcss-loader css-loader style-loader
postcss 的配置可能会很多，通常都是分离出一个单文件进行配置存储，不写 cli 相关的内容了。
根目录下新建 postcss.config.js文件，内容如下：
module.exports={
plugins: [
require('autoprefixer')
]
}
需要注意的是在相关的 js 文件中引用 css。
import '../style/test.css'
在 webpack.config.js 配置中添加：
module.exports={
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
}
}
loader 的加载顺序是从右至左，依次 postcss-loader 添加浏览器前缀、css-loader转义CSS文件 、style-loader转义成js代码。
html,body{
background-color: pink;
}
.div {
display: flex;
}
通过将以上三个 loader 将css源码转化为js代码。
js代码执行后将css样式包裹在 style 标签内插入至页面中。
less-loader
less-loader能将通过less语法写的样式转化成浏览器可读取的样式表，sassstylus都有其对应的loader。
安装命令，画一下重点，把 less 也一块安装，否则依然无法解析：
yarn add -D less-loader less
或使用NPM进行安装：
npm i -D less-loader less
在 webpack.config.js 配置中添加：
module.exports={
...
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'less-loader'
]
}
]
}
}
css-loader的importLoaders参数方法解释是：用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。在模块系统（即 webpack）支持原始 loader 匹配后，此功能可能在将来会发生变化，这段翻译很难让人理解。
重新解释一下
importLoaders，这里设为 2：
表明在某个less文件中@import进来的资源（其它的less文件）会被使用postcss和less这两个loader解析，解析正确。
设为 1：
表明在某个less文件中@import进来的资源（其它的less文件）只会被使用postcss这一个loader解析，便报错。
@green: green;
body,html{
background-color: green;
}
.flex {
display: flex;
}
less 文件经过 loader 转义后：
plugins
plugins插件可以以各种方式定制webpack构建过程。
clean-webpack-plugin
每次构建时清理文件，避免文件名带hash时重复生成多个文件。
神圣的rm -r XX连接着我们
yarn add -D clean-webpack-plugin
npm i -D clean-webpack-plugin
在 webpack.config.js配置中增加：
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
...
plugins: {
...
new CleanWebpackPlugin(['dist'])
}
}
传递的参数是需要清理的文件路径，每次 webpack 运行都会支持清理操作。
html-webpack-plugin
这是一个可以动态生成
html文件的插件，配合各种loader可以将处理好的cssjsimage引入到html中。
yarn add -D html-webpack-plugin
npm i -D html-webpack-plugin
在 webpack.config.js配置中增加：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins: {
...
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/index.html'),
filename: 'index.html',
chunks:['main'],
title: 'this is main.html'
}),
}
}
template: 所需读取的index模板文件。
filename: 动态生成后的文件名，路径以output中path的地址为参照。
chunks:entry中多入口项目可以指定本次html所需依赖的js文件，如果依赖的chunk较多可配置excludeChunks来进行排除。
title: 绑定在htmlWebpackPlugin.options上的参数，可在模板内使用。
index.html 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
<%= htmlWebpackPlugin.options.title %> 为 ejs 模板语法，可以使用 htmlWebpackPlugin 上的各种属性定制自己的 html 模板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this is main.html</title>
</head>
<body>
<script type="text/javascript" src="js/main.js"></script></body>
</html>
title 变为了传入的值，js 也被动态引入了，依赖的 css 也被打包进 js 内。
html-webpack-inline-source-plugin
这是一个依赖于
html-webpack-plugin的插件，目的是将js和css文件内联至html，
yarn add -D html-webpack-inline-source-plugin
npm i -D html-webpack-inline-source-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('html-webpack-inline-source-plugin')
module.exports = {
...
plugins: {
...
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/index.html'),
filename: 'index.html',
chunks:['main'],
inlineSource: '.(js|css)$',
title: 'this is main.html'
}),
new HtmlWebpackInlineSourcePlugin()
}
}
HtmlWebpackPlugin 配置中插入 inlineSource: '.(js|css)$' 配置，将 js 和 css 都内联。
注意：本以为这个插件可以单独将
css以<style></style>的形式打包完写入页面。然而并不可以，结合之前的几个处理css的loader可知，只能将其内联至<script></script>中，页面加载时动态插入至html中。
extract-text-webpack-plugin
插件能将
js中引入的css文件分离出来，不再以<style></style>的形式插入页面，单独以<link>的方式引入。
yarn add -D extract-text-webpack-plugin
npm i -D extract-text-webpack-plugin
在 webpack.config.js配置中增加：
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
...
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
'less-loader'
]
})
}
]
},
plugins: {
...
new ExtractTextPlugin('css/[name].css'),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/index.html'),
filename: 'index.html',
chunks:['main'],
title: 'this is main.html'
})
}
}
重新打包后 main.css 被引入页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this is main.html</title>
<link href="css/main.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="js/main.js"></script></body>
</html>
注意：这个插件存在问题，
chunk内引入了多个css文件，分离时会合并为一个css文件。
将 extract-text-webpack-plugin 和 html-webpack-inline-source-plugin 联合使用可以将 css 以 <style></style> 的形式打包完写入页面。
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
...
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'postcss-loader',
'less-loader'
]
})
}
]
},
plugins: {
...
new ExtractTextPlugin('css/[name].css'),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'src/index.html'),
filename: 'aa.html',
chunks: ['aa'],
inlineSource: '.css$',
title: 'this is aa.html'
})
}
}
将 inlineSource 设为 .css$。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this is aa.html</title>
<style type="text/css">body,
html {
background-color: gray;
}
</style></head>
<body>
<script type="text/javascript" src="js/aa.js"></script></body>
</html>
注意： 此方法不会因为
css的内联将分离生成的.css文件清除，依然会保留，只是不会引入页面内。
总结
webpack 对于 css 文件的处理不太友好，分离 css 的做法也有些违背 webpack 模块化打包的初衷，有人倾向于使用 gulp 进行 图片 css 的资源文件的出来，而使 webpack 专注于 js 模块化，日后会着重研究这块。
为了写博客翻了下有稍显杂乱的
webpack文档，发现extra-loader和html-loader之前被我选择性忽略了，可以尝试换新的方式处理css文件打包问题。
尾巴
第一篇技术博客磕磕绊绊的写完了，愿自己越来越上进吧！
