解析前端构建工具webpack

[baixiaoji]

前言

真快呀，过年的时候才对webpack 1的了点感性认识，就做了两个关于Vue的项目，之后就出了webpack 2，怕来不及记录，所以写这篇文章来记录一下Webpack 2。

Webpack概述

webpack is a module bundler for modern JavaScript applications.

上述是来自官方文档的定义，说白了就是webpack = module bundler(加载器)，对于webpack来说，所有的文件都是模块，只是处理的方式不一样罢了。

说道学习webpack的难易程度：

It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.
官网说：「很容易的，只要理解了entry、output、loaders、plugins这四个核心概念，你就入门了！」

所以要好好学英语呀，当然还有一些cli/nodeJS的知识。

webpack配置文件

要想使用webpack，其根目录下会有一个webpack.config.js的文件,大概是这样：

// webpack.config.js
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配置文件，基本可以处理大多数的前端业务场景了。

解读webpack配置文件

讲解内容还是以一个Github项目为主：地址

四个核心概念

1. entry

entry就是整个模块的读取入口，根据webpack 2的文档，对entry值有了更多的拓展

    let base ='./index.js'
    
    //let base = {
    //    index:'./index.js',
    //    index1:'./index1.js'
    //};

    // webpack2 提供了多种配置方案   https://webpack.js.org/configuration/entry-context/#entry
    // const dynamic_entry = ()=>base;

    // const dynamic_entry_promise=()=>{
    // 	return new Promise((resolve,reject)=>{
    // 		resolve(base)
    // 	})
    // }


    module.exports = {
        entry:base,
        output: {
            filename: '_[name].js' 
        }
    };

2. output

output这个对象的设置告诉webpack怎样的放置导出的文件。

    //文档  https://webpack.js.org/configuration/output/
    const path =require('path');
    let base = {
        index:'./index.js',
        index1:'./index1.js'
    };

    module.exports = {
        entry:base,
        output: {
            // 设置导出模块 使用绝对路径 
            path: path.resolve(__dirname, 'dist'),
            // 使用 on-demand-loading 或者加载其余的资源如：图片、文件等
            //  起了服务器，设置关于导出文件目录 公共的路径（URL） 
            publicPath: "/output/dist/",
            // 设置包规范格式（写一些模块给别人用，设置过后会根据所给类型打包源码 也有amd cmd的规范）
            libraryTarget:'umd',
            // 给自己的库起的名字，跟amd规范里difine的中的第一个参数一样
            library: "MyLibrary", 
            // 除entry以外的那些需要加载的文件命名
            // chunkhash => webpack对每一个文件编译产生的hash
            chunkFilename:'[chunkhash]_[name].js',
            // hash值的设置
            hashDigestLength:3,
            // 导出文件名
            // hash ==> webpack编译过程产生的hash值
            filename: '[hash]_[name].js'
        }
    };

3. modules/loaders

对每一个不同文件的处理方式的设定

//webpack 1的写法
    module: {
        loaders: [{
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }
    // webpack 2的写法
    module:{
        rules:[
                {
                // 是Rule.resource.test的简写 
                // 作用就是检测condition是否匹配这个resource query 
                // 是就使用loader编译，反之不用，仅仅是预处理
                test: /\.jsx?$/,
                // rule.use是数组形式和rule.loaders是它的别名
                use:[{
                    loader: "babel-loader",
                }]
            },
        ]
    }

4. plugins

plugin是Webpack构建过程中的个性化的处理设置。其中有一些自带的插件。参考文档

    plugins: [
        // 自带的压缩代码的插件
       new webpack.optimize.UglifyJsPlugin({
           compress: {
               warnings: false
           }
       })
    ]

这一部分，不知如何讲好，找了一些文档来辅助，辅助文档

以上是核心的四个概念和部分常用配置参数的讲解。

5. resolve

These options change how modules are resolved.
resolve.alias的作用就是对module模块提供别名，和require里的path参数有相似的作用。（可以将一些需要多次引用的模块改成一些东西）

resolve:{
    alias:{
        jquery :path.resolve(__dirname,'/src/lib/jquery.js')
    }
  }

6. devtool

这个是大招了，可以让我们在浏览器的调试工具调试的是否是源码。
如果想要显示源码，就用devtool:source-map

module.exports = {
  // https://webpack.js.org/configuration/devtool/#devtool
  devtool:'source-map',
  // https://webpack.js.org/configuration/target/#target
  target:"web",
  entry:"./index.js",
  output: {
  	path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
};