—— 踩坑计划第一步

目录一览

webpack3.0学习笔记（一）
webpack3.0学习笔记（二）
webpack3.0学习笔记（三）

前情概要

记录最近 webpack 的学习进展，及使用中的注意事项和踩过的坑，非新手教程欢迎指正错误。
PS. 当前 webpack版本 3.6.0。

webpack

现今许多类库都支持 webpack 进行打包管理，vue react 等主流 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-server webpack热替换 等，结束后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 语法就被转为 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代码。

css转义为js

js代码执行后将css样式包裹在 style 标签内插入至页面中。

html页面加载效果

less-loader

less-loader 能将通过 less 语法写的样式转化成浏览器可读取的样式表，sass stylus 都有其对应的 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 转义后：

less转义后

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 可以将处理好的 css js image 引入到 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 都内联。

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 文件打包问题。

尾巴

第一篇技术博客磕磕绊绊的写完了，愿自己越来越上进吧！

webpack3.0学习笔记（一）

webpack3.0学习笔记（一）

目录一览

前情概要

webpack

webpck配置概览

入口 entry 及输出 output 配置

模块热替换 Hot Module Replacement 配置

loader

babel-loader

postcss-loader

less-loader

plugins

clean-webpack-plugin

html-webpack-plugin

html-webpack-inline-source-plugin

extract-text-webpack-plugin

总结

尾巴

相关阅读更多精彩内容

友情链接更多精彩内容