WebPack在React项目架构中的应用实践

Posted 2021-04-29 天外野草技术专栏

“ webpack构建工具，一个模块化工程必备的架构工具。”

01

—

什么是webpack?

首先，webpack是一款前端的架构工具，也是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 或者import(XXX)的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass）, webpack拥有很多的模块加载器（loader）来处理这些问题。

官网是 http://webpack.github.io/

02

—

webpack的优势

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2. 支持多种文件资源，比如js, coffee等等。

3. 配置简单，开发便捷，比如打包、压缩混淆、图片转base64等。

4. 扩展性强，插件机制完善，特别是支持 React 热加载插件（ react-hot-loader ）

03

—

webpack的安装

我们常规直接使用 npm 的形式来安装：

$ npm install webpack -g

常规项目还是把依赖写入 package.json 包去更人性化：

$ npm init$ npm install webpack --save-dev

04

—

webpack的配置

每个webpack的工程都会有一个配置文件，就比如grunt中的gruntfile.js, gulp中的gulpfile.js。

webpack中的文件名字叫做webpack.config.js, 这个文件需要在项目根目录创建，默认的执行指令为‘webpack’。

简单配置：

module.exports = {    entry: './index.js',   
 output: {        path: __dirname,     
    filename: 'bundle.js'
    },   
     module: {     
        loaders: [{        
            test: /\.css$/,       
                 loaders: ['style-loader', 'css-loader']
        }]
    }
};

这里解释一下几个属性的作用：

• entry:用户配置整个项目工程文件的入口点。

• output：用于配置解析编译后生成压缩文件路径。

• module: 主要定义项目中的解析器例如css, jsx， babel等等，这个很想gulp,grunt的task，这里比较好的一点是我们不需要require这些loader，但是需要额外安装的。 而gulp是需要的。

可以配置多个entry:

var path = require('path');var config = {  entry: {    admin: './admin/index.js',    consumer: './consumer/index.js'
  },  output: {    path: path.join(__dirname, 'dist'),    publicPath: '/dist/',    filename: '[name].bundle.js'
  }
};module.exports = config;

上面代码中的path, __dirname为webpack特有的方法属性用于指定路径。

04

—

webpack的常用loader分析

对于webpack来讲，可贵之处在于提供了大量可用的loader处理我们的资源文件，Loader 是支持链式执行的，如处理 sass 文件的 loader，可以由 sass-loader、css-loader、style-loader 组成，由 compiler 对其由右向左执行，第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果回传给下一个接着处理，最后的 Loader 将处理后的结果以 String 或 Buffer 的形式返回给 compiler。

如下常用几项：

预处理器

• css-loader 处理css中路径引用等问题

• style-loader 动态把样式写入css

• sass-loader scss编译器

• less-loader less编译器

• postcss-loader scss再处理

loaders之 js处理

• babel-loader

• jsx-loader

loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]

image-loader

loader安装：

sudo install image-webpack-loader --save-dev
 
   
   
 

  
    
    
  
1
 
   
   
 

config代码：

module: {
    loaders: [
        {                test: /\.(jpe?g|png|gif|svg)$/i,                loaders: [                        'file?hash=sha512&digest=hex&name=img/[hash].[ext]',                        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
        }
    ]
},

url-loader

sudo npm install url-loader --save-dev

url-loader的功能和image-loader功能比较类似，只是url-loader可以k控制小于某个大小的图片转成dataurl。

05

—

webpack的常用plugin应用

webpack的plugin可以帮助开发者处理压缩混淆等代码上的问题，使用也是相当方便，具体我们看一下代码：

plugins: [        //单独生成html文件
        new HtmlWebpackPlugin({
            filename: '../index.html',//生成的html及存放路径，相对于path
            template: './src/index.html',//载入文件及路径
            publicPath: "js/",//这是build文件下html文件引用js文件的路径
            chunks: ['index'],//需要引入的chunk，不配置就会引入所有页面的资源
        }),        // 使用browser-sync实时刷新页面
        new BrowserSyncPlugin({
          host: 'localhost',
          port: 3000,
          server: { baseDir: ['./build/'] }//会默认访问./build/index.html
        }),        //负责压缩JS代码，并控制是否要显示警告
        new webpack.optimize.UglifyJsPlugin({      compress: {
        warnings: true
      }
    }),    new webpack.optimize.OccurenceOrderPlugin()
      ]

这里主要说明一下一下几个个插件：

new webpack.optimize.DedupePlugin() 

主要查找相等或近似的模块，避免在最终生成的文件中出现重复的模块，比如可以用它去除依赖中重复的插件。

new webpack.optimize.OccurenceOrderPlugin() 

这个插件为组件和模块分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID，通过分析ID，可以建议降低总文件的大小。

new webpack.HotModuleReplacementPlugin()

全局开启代码热替换,

new ExtractTextPlugin("styles.css")

默认情况下，css是被打包到js中的如果接受不了，我们可以应用这个plugin将css style提取出来。

06

—

webpack的运行指令分析

webpack的运行相对简单：

webpack -watch 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块

通常情况下我们也会用npm包管理器进行封装，以便于使用，例如：

"scripts": {    "start": "./node_modules/.bin/webpack -d --progress --colors --watch",    "build/":"./node_modules/.bin/webpack  -p"
  }

07

—

总结

总体上来讲，webpack并不是一个新的工具，之前使用范围也不是很广泛，但是自由其过人之处，很多loader还有待继续完善，相信之后的版本会给大家一个不错的惊喜。