Webpack从入门到上线

时间 2019-12-02

标签 webpack 入门上线繁體版

原文原文链接

webpack是目前一个很热门的前端打包工具，官网说得很清楚，webpack的出现就是要把requirejs干掉。同时它还提供了十分便利的本地开发的环境。网上并不容易找到一个讲解得比较详细完整的教程，本文结合实践经验，总结一套可用的开发和上线的配置和流程。javascript

首先，Require JS有什么问题php

RequireJs存在的问题

博主先是使用了RequireJs，后来又转了webpack，综合比较，requirejs确实存在一些缺点：css

1.写法比较笨拙

须要把全部的依赖模块写在require函数里面，当模块不少的时候，看起来逼格就不高了，感觉以下： html

而webpack既兼容requirejs的写法，也兼容commonjs的写法，也就是说，使用webpack你既能够继续像上面那样写，也能够像node那样写，感觉以下：前端

var modules = {
        signHandler: require("module/sign-log"),
        chatHandler: require("module/chat-win"),
        mapHandler: require("lib/map"),
        util: require("lib/util")
    };

能够在须要的时候再去require，而不是搞个大括号把所有的模块一会儿写到一块儿。（模块的导出用module.exports = ....）java

固然这两种写法不只是感光上的区别，逻辑上也有区别。用中括号加载的模块一般webpack是动态去加载，而没有中括号是和主文件打包在一块儿的。node

2. 没有通用模块的概念

例若有一个弹框模块，用在登录注册，而且全部页面都有登录注册，因此这是一个全部页面的通用模块。若是页面的其它模块都没调到通用模块里面的东西的话，用RequireJs没什么问题。可是实际状况上不是这样的，例如util模块既会被登录注册的模块调用，也会被不少其它模块调用。这个时候合并压缩就有问题了：合并后的通用模块如common-app.js会带上util的代码、另一个页面的例如detail.js也会带上util的代码，之后一改util.js里面的东西，就会一并改动其它全部用到util的页面js，就得从新打全部js的版本号。这样不管对布署上线，仍是对于用户的缓存来讲都是不利的。
react

webpack能够把几个文件的通用模块抽出来单独做为一个模块common-chunk.js，引用的时候每一个页面先引一个common-chunk.js，再引一个该页面本身的js文件如detail.js，原detail.js里面和其它js文件共用的模块已经被提取到common-chunk.js里面。webpack

3. 没办法直接动态合并压缩一个须要异步加载的模块

这个问题是这样的，假设个人聊天模块文件有500Kb这么大，并不但愿一刷页面就加载，而是用户点了聊天再去加载。这个聊天模块有一个入口文件和其它几个模块文件，我合并压缩了入口文件，须要有一个输出文件，而入口文件define的模块名和压缩优化后的输出文件的路径确定是要不同的，可是压缩以后他并不会自动去改变输出文件的模块名。这样就致使你要手动去改一下压缩文件的模块名，否则会require不到。我以前找了一下，没有找到解决方案，因此采起了一个压缩两次的比较笨拙的方法。nginx

而webpack有一个文件束chunkFile的概念，它会自动去把须要异步加载的文件变成一个chunkFile，而后触发加载的时候再去加载chunkFile。

4. 须要借助gulp等管理工具进行开发

webpack自己有一些插件和第三方的插件，能够在本地开一个webpack-dev-server，文件一保存的时候就会自动打包编译js/css/less/sass等。

使用RequireJs虽然看起来缺点比较多，可是使用RequireJs也有webpack不具有的优势，那就是RequireJs开发的时候在浏览器里面，每一个模块都是单独一个文件，跟本地文件保持一致，而webpack是把主文件和该文件都用到的模块都打包成了一个文件，这样在调试的时候就须要你去搜索找到要调试的位置，而使用requireJs直接根据第几行就能够了。不过，考虑到使用webpack能够搭建一个很方便的本地开发环境，因此这个缺点也不是很明显。

使用webpack

用一句归纳就是：写一个配置文件，而后执行下webpack，就能够把生成的文件输出，可压缩带版本号，同时生成一个source-map文件，这个文件包含了每一个模块的js和css的实际(带版本号)路径，根据这个路径就能够把html里面的js/css等换成真实的路径。

webpack是一个打包的工具，它有一个重要的概念，就是把js/css/image/coffee都当成地位相等的资源，你能够在js里面require一个css，也能够require一个image。可是这种模式比较适用于React等框架，都是用js控制。

webpack的其它几个重要概念：

1. loader加载器

上面说到，各类各样的资源均可以在webpack里面加载，而这些资源都须要相应的加载器，webpack才能识别，而后解析成正常的浏览器认识的资源。

换句话说，你能够给webpack加载各类各样的资源：css/less/sass/png/babel等，而后在代码里面进行管理。

例如要加一个sass的loader，须要先安装：

npm install sass-loader node-sass

而后在配置文件添加一个loader:

{
    test: /\.sass$/,
    loaders: ["style", "css", "sass"]
},

这样当你require(“hello.sass”)的时候，webpack就能处理这种.sass结尾的文件。这样子有两个好处，一个是webpack可以自动编译sass为css，另外一个是require进来的style，webpack会把它解析成一个object，这个object的key就是类名，就能够在js使用样式的类名，这种比较适合相似于react的开发模式。

2. 文件束chunk

上面提到的，会把动态加载的文件生成一个个的chunk，在配置文件的output里面加一行：

chunkFilename: "bundle-[id].js"

就会根据id区分不一样动态加载的chunk文件，而这些chunk文件名对于咱们来讲是可有可无，由于这个是webpack管理的，开发者无需关心叫什么又是怎么加载的。

3. webpack-dev-server

这是webpack的一个插件，能够在本地开一个静态服务，用来做为本地开发的重要工具。具体步骤就是html里面引用的资源用一个假的域名，如develop.com：

<script src="//develop.com/site/app-init.js"></script>

而后再把develop.com绑到本地回路:

127.0.0.1 fedren.com

这样请求就打到了本地的80端口。同时在本地开一个nginx监听在80端口，nginx收到80端口的请求后，再把请求转发到webpack的服务(默认是8080端口)。这样就可以实现本地开发，下文会具体介绍。

下面一步步介绍怎么配置和使用webpack

webpack的基本配置

首先，npm init建立一个node的配置文件package.json，而后安装webpack：

npm install webpack
sudo npm install webpack -g //安装一个全局的命令

再建立一个webpack.config.js文件，加入最基本的配置：

module.exports = {
    // The standard entry point and output config
    //每一个页面的js文件
    entry: {
        home: "js/home",
        detail: "js/detail"
    },
    output: {
        path: "assets",                   //打包输出目录
        publicPath: "/static/build/",     //webpack-dev-server访问的路径
        filename: "[name].js",            //输出文件名
        chunkFilename: "bundle-[id].js"   //输出chunk文件名
    }
};

工程的js都放到js目录下，一个叫home.js，另外一个叫detail.js，输出到assets目录，publicPath是为webpack-dev-server所使用

而后在当前目录执行webpack，发现webpack报错了：

ERROR in Entry module not found: Error: Cannot resolve module 'js/home' in /Users/yincheng/code/blog-webpack

找不到js/home的模块，只要在配置里面加一句resolve：

    resolve: {
        modulesDirectories: ['.']
    }

告诉webpack全部模块的启始目录由当前目录开始，再执行下webpack就能够正常输出了：

到目前为此，当前工程的目录结构就是这样的了：

接下来，建立html：home.html，里面引入js文件，"static/build"即为上面定义的publicPath：

<body>
    <p>home.html</p>
    <script src="//develop.com/static/build/home.js"></script>
</body>

注意咱们用了一个develop.com的域名，把这个域名绑到本地回路：

127.0.0.1 develop.com

而后配置nginx，打开nginx.conf，加多一个server:

    server {
        listen       80;
        server_name  payment-admin.com;
        charset utf-8;
        #工程路径
        root    /Users/yincheng/code/demo;
        autoindex       on;
        autoindex_exact_size    on;

        location ~* /.+\.[a-z]+$ {
            proxy_set_header x-request-filename $request_filename;
            # webpack的服务
            proxy_pass http://127.0.0.1:8080;
        }
     }

启动nginx或者重启下nginx

而后再装一个webpack-dev-server：

npm install webpack-dev-server --save-dev
sudo npm install webpack-dev-server -g

而后启动webpack-dev-server，执行：

webpack-dev-sever --port=8080 //不加port参数，默认就为8080端口

而后就能够访问：http://develop.com/html/home.html

这个时候，只要一改变home.js的内容，webpack-dev-server就会自动打包新的文件，一刷新页面，就是最新的修改了。这样就实现了最基本的本地开发，无论你用的jsp/php，都不须要把js/css往服务器上传。注意webpack-dev-server是在内存生成的文件，你在本地是找不到static/build目录的，只有执行了webpack打包才会输出文件到assets目录。一个为上面配置里的publicPath，另外一个为path。

引入样式文件——首先建立css/home.css：

body{
    color: #f00;
}

而后在js里面引入这个css文件：

require("css/home.css");

一保存以后，会发现webpack-dev-server报错了：

ERROR in ./css/home.css
Module parse failed: /Users/yincheng/code/blog-webpack/css/home.css Unexpected token (1:4)
You may need an appropriate loader to handle this file type.

根据提示，咱们须要加装一个css loader，让webpack可以处理css文件，更改webpack.config.js，加入一个loader：

module.exports = {
    entry: ...,
    output: ...,
    resolve: ...,
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
        ]
    }
};

固然要先安装一下：npm install style-loader css-loader --save-dev，而后再重启下webpack-dev-server，就能够加载样式了，咱们发现webpack是把样式动态插到了head标签的style里面，可是通常并不但愿直接写到head里面，而是独立的一个css文件，这个时候借助一个分离css的插件就能够了：

npm install extract-text-webpack-plugin --save-dev

同时把配置文件的loader改一下：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            // Extract css files
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
        ]
    },

    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
};

就会生成和js相同路径和名字的css文件，在home.html里面引入css文件：

<link rel="stylesheet" href="//develop.com/static/build/home.css"></link>

你也能够加载各类各样的loader，如加载一个sass/less loader，require一个sass/less文件后就能够写sass/less了，webpack会把它编译成和上面同样普通的css文件，读者能够本身试试，还能够再装一个png/jpg的loader，指定一个小于多少个k的图片的参数，webpack就会把小于指定尺寸的图片转成base64的格式。各类loader的安装查一查就有了。

到这里一个最基本的本地开发环境就已经搭起来了。接下来讨论自动刷新

自动刷新

上面一保存js/css的时候，webpack server就会自动打包，刷新页面的时候就是最新的修改。这个刷新只要使用webpack的hot模式就能够自动实现，即一保存就自动打包刷新。将上面运行webpack-dev-server的命令再加多两个参数，按照官方文档的方式：

webpack-dev-server --port=8383 --hot --inline

若是没有意外，在你的电脑上将会报错：

ERROR in multi home
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in /Users/yincheng/code/blog-webpack
 @ multi home

这个问题困惑了笔者很久，由于在node_modules里面是有这个"webpack/hot/dev-server"的，其实只要认真看下上面的提示，就会发现它并非说在node_modules里面，而是在当前工程目录里，因此把node_modules里的webpack文件夹拷一份到外面就能够正常运行了。（若是你又配了个context的参数的话，那就根据提示拷到context指定的目录）

使用hot模式，只要一保存js/css就能够自动刷新了，这个功能确实很方便。若是不写参数，也能够把它写在配置文件里面：

var hotModuleReplacementPlugin = require("webpack/lib/HotModuleReplacementPlugin");
module.exports = {
    plugins: [
        new ExtractTextPlugin("[name].css"),
        new hotModuleReplacementPlugin()
    ],
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true
    }
};

而后运行server就不用带上后面那两个参数了。

Common chunk

如上文提到，webpack能够将几个js的公共模块提取成一个chunk，须要借助一个commonChunkPlugin，在上面的plugins再添加一个：

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
plugins: [
        new CommonsChunkPlugin({
            //minChunks: 3,
            name: "common-app.chunk",
            chunks: ["home", "detail", "list"]
        })
    ]

这样就能够把home、detail、list三个js和css用到的公共模块提取到common-app.chunk.js和common-app.chunk.css这两个文件了。注意页面要先引入这两个文件，而后再引入具体页面的js，webpack在common chunk里面定义了它的require函数。如上面的home.html：

    <script src="//develop.com/static/build/common-app.chunk.js"></script>
    <script src="//develop.com/static/build/home.js"></script>

能够指定一个minChunk的参数，指定模块至少被require几回才能提取出来，默认是3

还能够定义两个commonChunk，例如在详情页、列表页和首页都有搜索的模块，而其它页面没有搜索的模块，也就是说除了全部页面都有的公共模块如登录注册外，还有一个搜索的公共模块有三个页面要用到。若是都用一个common chunk，会把搜索的也放进来，但其它不少页面并不须要用到。这个时候须要加多一个common chunk：

    plugins: [
        new CommonsChunkPlugin({
            name: "search-app.chunk",
            chunks: ["search-app-init", "home", "detail", "list"]
        }),
        new CommonsChunkPlugin({
            name: "common-app.chunk",
            chunks: ["home", "detail", "search-map", "search-app.chunk", "sell", "about", "blog"]
        })
    ]

注意要把search-app.chunk也写到下面那个全部页面的chunk里面，不然webpack会定义两个同样的require函数，页面的模块也会跟着混乱，一刷页面就报错。页面引用js的顺序就变成了：

    <script src="//develop.com/static/build/common-app.chunk.js"></script>
    <script src="//develop.com/static/build/search-app.chunk.js"></script>
    <script src="//develop.com/static/build/home.js"></script>

压缩和版本号

压缩只须要要在plugins里面再添加一个用来压缩的插件：

var webpack = require("webpack");
plugins: [
    new webpack.optimize.UglifyJsPlugin()
]

这样执行webpack输出的js/css就是压缩的

版本号就是在输出带上hash的替换符，以下：

module.exports = {
    output: {
        path: "assets",
        publicPath: "/static/build/",
        filename: "[name]-[chunkhash].js",
        chunkFilename: "bundle-[chunkhash].js"
    },

    plugins: [
        new ExtractTextPlugin("[name]-[contenthash].css")
    ],
}

其中js用的是webpack的chunkhash，而css用的是contenthash，contenthash是根据内容生成的hash。若是不用contenthash，那么一改js，css的版本号也会跟着改变，这个就有问题了。webpack还有另一个自带的叫作"[hash]"，这个hash是全部文件都用的同一个哈希，也就是说某个文件改了，全部文件的版本号都会跟着改，因此通常不用这个。

运行webpack，若是报了下面这个错误：

ERROR in chunk detail [entry]
[name]-[chunkhash].js
Cannot use [chunkhash] for chunk in '[name]-[chunkhash].js' (use [hash] instead)

那你就把plugins里面的热替换插件注释掉就行了，上线的config不须要热替换：

    plugins: [
        //new hotModuleReplacementPlugin(),
    ],

成功执行后，就会在设定的output目录下面输出加上版本号的文件：

.
├── detail-d19e4614a1c4f3c1581b.js
├── home-11198f8526424e8c58ce10a2799793e3.css
└── home-5ec13a52eea2a6faf96a.js

有了版本号以后，下一步是要把html里面的js/css换成带版本号的路径

替换Html里js/css路径

以前在html里的路径是test.com，如今要把它换成cdn且带版本号的路径，也就是说，目标是要把下面的引入：

<script src="//develop.com/static/build/home.js"></script>

替换成下面的引入，并把新生成的html输出到built目录

<script src="//cdn.mycdn.com/test/home-5ec13a52eea2a6faf96a.js"></script>

目测没有现成符合格式的插件能够用，能够自已用node写一个，不费事。

首先要知道全部文件的对应的版本号，能够用AssetsPlugin，生成source-map：

var AssetsPlugin = require('assets-webpack-plugin');
    output: {
        publicPath: "//cdn.mycdn.com/static/build/"
    },
    plugins: [
        new AssetsPlugin({filename: './source-map.json', prettyPrint: true}),
    ]

执行webpack以后，就会生成source-map.json，打开这个文件：

{
  "detail": {
    "js": "//cdn.mycdn.com/static/build/detail-c8a2c82ebe2e48e06564.js"
  },
  "home": {
    "js": "//cdn.mycdn.com/static/build/home-380af86bfeb6fcb477a4.js",
    "css": "//cdn.mycdn.com/static/build/home-11198f8526424e8c58ce10a2799793e3.css"
  }
}

根据develop.com开头的以及最后面的home.js/home.css，就能够在上面找到对应的路径名。笔者写了个脚本，能够实现这个功能，详见：version-control-replace-html

到这里，整个流程就基本完成了。还有一些优化的步骤

优化

1. 优化模块id

webpack对于每一个模块都是用id标志，而不是用模块的名字，只是为了节省空间。还能够再节省，就是用它自带的occurrence-order插件将最经常使用的模块靠前，这样能够再节省一点点空间，由于id是从0开始排的，从一位数到n位数。

new webpack.optimize.OccurenceOrderPlugin()

2. 移出版本号

在上面用了common-chunk的插件，抽离公共模块，在这个common-chunk.js里，webpack会定义每一个模块加载的src，以便于加载那些须要动态加载的chunk，以下：

script.src = __webpack_require__.p + "" + chunkId + "-" + {"0":"0cb48ff1ab1d1156015d","5":"e9e7f761f306c648ccef","6":"cbbdf8e3ad1aba34ced0"}[chunkId] + ".js";

从上面能够看出它会把版本号也写在里面，这样就致使一个问题，每改一个js文件，它的版本号就会变化，就会致使common chunk里面的内容发生变化，因此它的版本号也得跟着变，也就是说改了一个文件，影响了两个文件。因此须要把它抽出来，有个插件已经作了这样的事情，叫作ChunkManifestPlugin：

var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
plugins: [
        new ChunkManifestPlugin({
            filename: "chunk-manifest.json",
            manifestVariable: "webpackManifest"
        })
]

传两个参数，一个是输出文件名，另外一个是变量名，用于上面的script.src，执行webpack后，它会把上面script.src的那一坨东西放到chunk-manifest.json，而后在页面写一个内联的script，定义一个全局变量window.webpackManifest，值为manifest.json里面的内容。笔者已在上面的替换版本号的脚本作处理，只需在页面合适的地方写上一行：

<!--%webpack manifest%-->

就会把这行替换成一个script标签。

3. 多个common-chunk的优化

在上面写了两个common chunk，在生成的两个chunk文件里面，你会发现大量的的重复代码，已经失去了公共模块的做用，这个问题能够用一个MoveToParentMergingPlugin解决，它会把search-app用到的common-app的模块所有移到了common-app，search-app就不会重复common-app的内容了。

html保存自动刷新

上面提到，只要一保存css/js，webpack-dev-server就会自动保存和刷新，可是html/jsp没办法（若是你用react开发，能够用react-hot-loader），其实能够手动解决这个问题。打开node_modules/webpack-dev-server/client/index.js这个文件，能够发现webpack是用的sockjs实现自动刷新的。浏览器使用sockjs建立socket客户端，链接到webpack的服务，保存更改的时候，服务就向浏览器的socket发送消息，接收到这个消息后客户端就调window.location.reload刷新页面。因此能够模仿这个过程，在本地另开一个服务，监听html的修改，而后向浏览器端发送刷新页面的消息。

具体来讲，首先在上面的node_modules/webpack-dev-server/client/index.js这个文件最后面再添加一个socket链接：

/*自定义reload window*/
var reload = new SockJS("http://localhost:9999/reload");
reload.onopen = function(){
    console.log("customer reload start.......");
}

reload.onclose = function(){
    console.log("customer reload close.......");
}

reload.onmessage = function(_msg){
    var msg = JSON.parse(_msg.data);
    if(msg.type === "reload"){
        console.log("customer reload window now");
        window.location.reload();
    }
}

这个9999端口的server就是下面要在本地监听的一个socket服务。在开这个socket服务以前，须要先在本地开一个监听文件修改的服务，而后再向这个socket服务发送消息。监听的服务比较好写，有现成的node包能够用：chokidar，使用也很是简单。监听到修改以后就能够执行上传服务器的命令，而后（使用进程间的通讯）再向socket服务发送一个须要刷新的消息，再传递给浏览器的scoket，如上面的代码，一收到消息就刷新页面。具体代码查看github

除了优化，在使用中会遇到的一些问题：

解决问题

1. umd的require模式

有时候会引入外部的库，这些库可能会用umd的require模式，判断是要用requirejs仍是commonjs或是写个全局的函数：

    /* CommonJS */ if (typeof require === 'function' && typeof module === 'object' && module && typeof exports === 'object' && exports)
        module['exports'] = init(require("ByteBuffer"));
    /* AMD */ else if (typeof define === 'function' && define["amd"])
        define("lib/chat/ProtoBuf", ["./ByteBuffer"], init);
    /* Global */ else(global["dcodeIO"] = global["dcodeIO"] || {})["ProtoBuf"] = init(global["dcodeIO"]["ByteBuffer"]);

这个的问题就在于，只要页面上有require出现，webpack就会去打包，无论你是写if里面还click事件里面。由于像上面说的，webpack会把异步加载的文件打包成一个boundle文件，同时也会把非异步的打包到一块儿。像上面那样写，它会重复打包，生成好多个bundle。只要加多一个umdREquirePlugin，webpack就能正常打包了。

2. 如何加载外部资源

webpack是一个打包的工具，它并非像requireJs那样能够支持直接require一个外部资源。

例如我要require谷歌地图：https://maps.googleapis.com/maps/api/js，打包的时候webpack会给出一个warning，说加载不到这个外部资源，运行代码的时候会报错，提示没有这个模块。

另一个问题是，我须要if else判断，若是是中国的环境就加载中国域名的谷歌地图：http://ditu.google.cn/maps/api/js 不然就加载上面的，使用webpack是没办法作到的，使用requireJs就能够很简单地直接require一下就行。

但其实这个问题很好解决只要本身写一个动态加载script的函数就行了，一个兼容性很好的版本：

function loadScript(url, callback){
            var script = document.createElement("script")
            script.type = "text/javascript";
            if (script.readyState){  //IE
                script.onreadystatechange = function(){
                    if (script.readyState == "loaded" || script.readyState == "complete"){
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function(){ callback(); };
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

详见：The best way to load external JavaScript

webpack虽然是一个利器，可是坑也很多，目前遇到过的不太好解决的问题：

遇到的困难

1. chunkhash

使用chunkhash有两个问题，一个是css改变以后，js的版本号也会跟着改变，即便js没有修改，可是比较这两个js文件的时候，你会发现这两个版本号不同的文件内容是彻底如出一辙的。由于chunkhash不是根据文件内容算的hash值。第二个问题是，相同的代码在不一样人的机器上打的包的版本号不同。若是使用一些根据文件内容打版本号的插件，如webpack-md5-hash，这个插件是用文件内容做一个md5的计算得出一个版本号，这样能够解决上面的两个问题，可是又引起了新的问题，这个md5的时不时就会出现打的版本号不惟一的状况，文件内容不一样、版本号相同，并且这个几率还不小。因此最后仍是放弃了使用这个插件，而后又尝试了另一个使用sha算法计算，可是这个改了一个文件会使几个文件的版本号也发生变化。如今仍是使用chunkhash

2. 模块id发生变化

上文提到，webpack的模块是用id标志的，每一个模块对就一个id，例如util对应2，可是这个id不是固定不变的，在n次修改和打包以后，util的id可能会变成了3，这个就比较坑了，给增量上线形成了阻力，即单独上一个html有风险。由于在common-chunk里面，util的id是上次打包的时候定的，可是你此次打包util的id变了，而你只想上home.html，在home.html里面引的home.js里面使用到的util的id对不上common-chunk里面的，致使不能在home里面正常地加载util这个模块。一个临时的解决办法是，home.js不要使用common-chunk，全部的模块都打包到home.js里面就不会有这个问题。

综上对于webpack的介绍基本说完了，后续会继续研究webpack的打包方式和怎么样写一个webpack的插件。若是上面有什么不合理或能够优化的地方还请指出。

1. webpack 从入门到上线
2. Webpack从入门到上线
3. webpack从入门到放弃
4. webpack从入门到进阶
5. webpack 从入门到放弃
6. egg-从入门到上线 (上)
7. egg-从入门到上线 (下)
8. webpack 从入门到放弃(一)
9. webpack从入门到精通（一）
10. vue+webpack 从入门到精通（二）
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用