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

x33g5p2x  于2022-03-06 转载在 其他  
字(4.0k)|赞(0)|评价(0)|浏览(423)

前言

说起WebPack的发展历程,不由想起了一那句“千里马常有,而伯乐不成有的”的名言,相信很多人都听说过Grunt, Gulp 这样的架构工具,但是却很少有人涉及应用过Webpack, 但是由于React的技术框架的风靡一时,webpack的地位以及应用度得到了很大的提升,这不得不感谢Facebook的架构。

对此,我也谈一下webpack在React项目中的应用实践,究竟为何要用这样一个技术架构。

什么是webpack

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

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

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

webpack的优势何在

  1. webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
  2. 支持多种文件资源,比如js, coffee等等。
  3. 配置简单,开发便捷,比如打包、压缩混淆、图片转base64等。
  4. 扩展性强,插件机制完善,特别是支持 React 热加载插件( react-hot-loader )

安装

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

$ npm install webpack -g

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

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

配置

每个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特有的方法属性用于指定路径。

常用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

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。

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提取出来。

webpack-dev-server使用

webpack-dev-server比较好用的地方在于热替换,更改后不需要重新刷新浏览器,配置上相比其他工具容易的多。简称(HMR).

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

我们只要在启动时候指定 –hot指令即可,例如:

webpack-dev-server --progress --colors --hot --inline -d

可以直接复制使用哦,打开url, 尝试修改代码,看看能否自动刷新!

运行指令分析

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"
  }

总结

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

个人微信公众号

相关文章