webpack技术讲解及入门

本文为饥人谷讲师slashhuang原创文章，首发于 前端学习指南。

webpack技术入门

webpack基本已经成为前端项目的标配构建工具了。

然而，在一个前端团队里面，除了架构师以外，其余开发者很难有机会在工做中完整的实现整个配置流程。

本篇文章是我在公司里面分享webpack及babel配置和插件开发的一个细节版本，

但愿能让你们经过阅读本文，比较好的梳理webpack工具。

webpack的出现解决了什么问题

JavaScript自面世以后，就成为浏览器的标准脚本语言。

然而JS自己并无提供python和java的package包、子模块的import等语法。

同时，前端代码还须要处理相似CSS、png、webfonts等非JS的文件。

在前端工程化大潮下，一个既能处理JS又能处理别的资源文件的加载器(bundler)亟待出现。

webpack就是这类解决方案中的杰出表明。

下面，我将按照以下的目录结构对webpack使用进行讲解。

一、webpack概述
二、一个简单而通用的webpack配置文件
三、webpack的配置文件解读
四、webpack经常使用的plugins及loader

1.webpack概述

webpack = module building system。

在webpack看来，全部的资源文件都是模块(module),只是处理的方式不一样。

上面两句话就把webpack从top-level的角度讲清楚了。

关于webpack的使用，其实和咱们平时开发业务产品是一个道理。

产品需求 ===> 代码设计 ===> 提供API给开发者使用。

webpack解决的需求点就是如何更好的加载前端模块。

这里我用了模块二字，是由于webpack从JS出发，将全部的文件看作它要处理的模块。

webpack自己并不关心这个模块是什么，它只是调度配置文件中对模块处理的方式来完成这一切,而没必要纠结文件类型。

好比咱们会在项目中使用ES6/7的语法来编写JS代码,

因而咱们只须要配置babel-loader便可处理这种JS。

好比咱们须要加载html文件获取html字符串,

因而咱们只须要配置raw-loader便可拿到对应文件的字符串。

好比咱们须要将sass/less文件预编译成css，

因而咱们只须要配置sass-loader/less-loader便可处理。

webpack提供了一套API接口，开发者只须要按照它提供的规范照着作就好了。

对于开发者来讲，除了须要阅读英语文档能力和nodeJS以外，webpack的学习门槛真的不高。

2.一个简单而通用的webpack配置文件

咱们以以下的 webpack.config文件来进行分析

var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
module.exports =  { 
        context:process.cwd(),
        watch: true,
        entry: './index.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },
        resolve: {
            alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'underscore',
                React: 'react'
            }),
            new DefinePlugin({
              'process.env': {
                'NODE_ENV': JSON.stringify('development')
              }
            })
        ],
        module: {
            loaders: [{
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },  {
                test: /\.less$/,
                loaders:['style-loader', 'css-loader','less-loader']
            }, {
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                test: /\.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };

这个简单的webpack配置文件，基本能够处理大多数的前端业务场景了。

经过配置plugins、module.loaders、entry、output基本能够构建一个兼容本地开发和生产环境的富应用web工程，下面针对以上的配置文件进行分析。

3. webpack的配置文件解读

* module.loaders数组
    [{
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]

好比有个文件require('index.jsx'), webpack会根据文件名是否知足test字段的正则来决定是否使用babel-loader来处理文件。 exclude则是告诉webpack不须要对node_modules目录进行处理

• resolve对象

resolve: {
            alias:{ jquery: path.resolve(process.cwd(),'src/lib/jquery.js')},
            extensions:['.js','.json']
        }

resolve对象是在 webpack预编译时，就加载进整个webpack编译的配置中的。

好比alias会创建文件标识符映射表

require('jquery')==> require('/Users/**/src/lib/jquery.js')

• plugins数组

/**
    好比有个文件代码中存在process.env对象，则process.env将会被替换成上面的{
        'NODE_ENV': JSON.stringify('development')
    }    console.log(process.env)==>console.log(({"NODE_ENV":'development'}))
    */

    plugins: [new DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('development')
            }
        })]

关于这个配置文件，读者若是有疑问，能够直接在评论区留言，我会尽快回复，这里就不赘述了。

更进一步的webpack配置含义能够参考个人github博客webpack编译流程漫谈

4. webpack经常使用的loaders和plugins

关于loader这块呢，webpack官方给出了很是详尽的解决方案，基本不用开发者再去开源社区上寻找。 前端资源loaders列表

关于plugins这块，除了webpack官方推荐的几款plugins外，社区上也有很是多不错的插件。webpack内置的plugins列表

通过多个前端项目搭建实践下，笔者认为以下几款plugins是很是不错的。

一、代码优化之:

• CommonsChunkPlugin - 抽取公共代码
• UglifyJsPlugin - 压缩混淆代码

二、 依赖注入之:

• DefinePlugin - 自由变量注入
• ProvidePlugin - 模块变量标示符注入

三、 文件抽取之:

• file-loader - 传送font等文件
• ExtractTextPlugin - 抽取css文件

四、 开发体验优化之:

• WebpackNotifierPlugin - 编译完成动态通知
• HtmlWebpackPlugin - 采用模板引擎形式注入到html文件，让开发更加easy

五、 目录/文件拷贝之:

• CopyWebpackPlugin - 目录及文件拷贝

5.webpack总结

本篇文章对webpack的讲解主要集中在API层面。

另外，关于更加深刻的webpack的编译流程， 我几个月前写过一篇博客webpack编译流程漫谈，能够供你们参考学习。

最后 欢迎你们关注个人知乎和前端学习专栏。

加微信号: astak10或者长按识别下方二维码进入前端技术交流群 ，暗号：写代码啦

每日一题，每周资源推荐，精彩博客推荐，工做、笔试、面试经验交流解答，免费直播课，群友轻分享... ，数不尽的福利免费送