webpack技術講解及入門

時間 2019-11-22

標籤 webpack 技術講解入門简体版

原文原文鏈接

本文爲飢人谷講師slashhuang原創文章，首發於前端學習指南。css

webpack技術入門

webpack基本已經成爲前端項目的標配構建工具了。html

然而，在一個前端團隊裏面，除了架構師以外，其餘開發者很難有機會在工做中完整的實現整個配置流程。前端

本篇文章是我在公司裏面分享webpack及babel配置和插件開發的一個細節版本，java

但願能讓你們經過閱讀本文，比較好的梳理webpack工具。node

webpack的出現解決了什麼問題

JavaScript自面世以後，就成爲瀏覽器的標準腳本語言。python

然而JS自己並無提供python和java的package包、子模塊的import等語法。react

同時，前端代碼還須要處理相似CSS、png、webfonts等非JS的文件。jquery

在前端工程化大潮下，一個既能處理JS又能處理別的資源文件的加載器(bundler)亟待出現。webpack

webpack就是這類解決方案中的傑出表明。git

下面，我將按照以下的目錄結構對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')
            }
        })]
複製代碼