脚本宝典收集整理的这篇文章主要介绍了

Webpack4从零搭建React开发环境

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

实践文:参考vue-cli配置及网上react相关文章,选用webpack4从零搭建react开发环境。

github项目地址

1、npm init初始化项目

  • npm -v可以查看npm版本,我安装的最新版5.5.1
  • 初始化项目后将生成一个package.json文件,如图:

clipboard.png

2、安装依赖

  • 安装开发环境依赖:npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
    a> 其中babel系列支持我们使用ES6语法(具体项目可选);
    b> webpack系列(包括各种加载器)是我们的模块打包工具,也是搭建开发环境的重要成员。
    c> webpack4需搭配webpack-cli使用
  • 安装react依赖:npm install --save react react-dom react-router-dom

安装完成之后package.json中会多出两个属性:devDependencies、dependencies,如图:

clipboard.png

3、配置执行命令

package.json中修改scripts属性为:


  "scripts": {
    "dev": "webpack-dev-server --hot --inline --progress --colors --config config/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
  },

dev字段配置开发环境命令npm run dev

  • webapck-dev-server启动开发环境服务器,
  • --config config/webpack.dev.conf.js表示输入npm run dev时,实际执行的文件是package.json同级目录下,config文件夹下的webapck.dev.conf.js文件(自己编写)。 如果去掉,将执行默认配置,这里我们将全部使用自己写的配置,以便更好地发现和解决问题。

4、创建项目目录

新增目录文件,并创建Hello World代码示例。如图所示:

clipboard.png

  • config目录存放webpack配置文件:
    a> webpack.base.conf.js为公用配置;
    b> webpack.dev.conf.js为开发环境配置,继承自webpack.base.conf.js;
    c> webpack.prod.conf.js为生产环境配置,继承自webpack.base.conf.js。
  • src目录存放项目代码:
    a> main.js为项目入口文件,负责挂载react组件到<div id="app"></div>上;
    b> App.js为React项目根组件,components为具体的react组件(这些在环境搭建完成之后才会做细分)。

5、webpack开发配置

接下来的配置需先安装依赖: webpack-merge、uglifyjs-webpack-plugin。(更多配置请按需引入)
重点在于入口、出口、plugins,这几个配好了就可以启动了。其他的是后期要优化的,比如热更新、代码分离等。
webpack.base.conf.js关键配置如下:

'use strict'
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口起点
  entry: {
    app: './src/main.js',
  },
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
  },
  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  // loader
  module: {
    rules: [
      {
        test: /.js|jsx$/,
        exclude: /(node_modules|bower_components)/,// 屏蔽不需要处理的文件(文件夹)(可选)
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    })
  ]
};

webpack.dev.conf.js配置如下:

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "development",
  // 调试工具
  devtool: 'inline-source-map',
  // 开发服务器
  devServer: {
    contentBase: false,// 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录
    historyApiFallback: true,// 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
    compress: true,// 启用gzip压缩
    inline: true,// 设置为true,当源文件改变时会自动刷新页面
    hot: true,// 模块热更新,取决于HotModuleReplacementPlugin
    host: '127.0.0.1',// 设置默认监听域名,如果省略,默认为“localhost”
    port: 8703// 设置默认监听端口,如果省略,默认为“8080”
  },
  // 插件
  plugins: [
    // 热更新相关
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    nodeEnv: 'development',
  }
});

.babelrc配置如下:

{
  "presets": ["latest", 'react', "stage-2"],
  "plugins": []
}

现在我们尝试启动一下npm run dev,报错如下:

Webpack4从零搭建React开发环境-脚本宝典
babel-loader版本问题,降级到7.x.x版本(如7.1.5)即可。如下图所示即运行成功:

clipboard.png

6、Webpack生产配置

webpack.prod.conf.js直接继承webpack.base.conf.js,执行npm run build如图所示:

Webpack4从零搭建React开发环境-脚本宝典
生成的app.js文件有110K,对比我们的代码量来说(main.js只有233B,占空间4K),这实在太大了!
这时候我们需要的就是webpack的代码分离了:把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。
配置webpack.prod.conf.js如下:

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "production",
  // 调试工具
  devtool: '#source-map',
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "js/[name].[chunkhash].js",
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(['dist', 'build'], {
      root: path.resolve(__dirname, '../'),
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  // 代码分离相关
  optimization: {
    nodeEnv: 'production',
    minimizer: [new UglifyJSPlugin()],
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
});

现在我们再来编译一次,如图:

Webpack4从零搭建React开发环境-脚本宝典
可以看到由原来一个js文件(app.js)变成了三个js文件(manifest.js、vendor.js和app.js),app.js的大小也变成了一个合适的大小1.31k


总结:本来是想入坑react,没想到先研究了一遍webpack的配置。从vue-cli官方定制到纯手工一项一项的配置,学到的东西还是挺多的,也更加理解了webpack模块化的概念。目前算是对热更新、代码分离这些有了比较直观的认识,然而要学的东西还有很多,继续努力吧~

clipboard.png

总结

以上是脚本宝典为你收集整理的

Webpack4从零搭建React开发环境

全部内容,希望文章能够帮你解决

Webpack4从零搭建React开发环境

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过