当前位置： 首页 > news >正文

搭建 webpack + React 开发环境

news 来源：原创 2024/5/8 5:02:54

说在开头

上个月断断续续的在研究webpack的配置，但是很多网上的文章基本上都是只说了开发环境的配置，而忽略了生产环境的配置。大致研究了一下门路，然后就来写一篇随笔让自己能在以后能有个地方可以做参考。

正文开始

我就假装大家都是装了node的情况下。

1、进入项目目录，运行`npm init`按照步骤填写最终生成`package.json`文件，所有使用 npm 做依赖管理的项目，根目录下都会有一个这个文件，该文件描述了项目的基本信息以及一些第三方依赖项（插件）。详细的使用说明可查阅[ 官网文档]，不过是英文的。
 
2、已知我们将使用 webpack 作为构建工具，那么就需要安装相应插件，运行 `npm install webpack webpack-dev-server --save-dev` 来安装两个插件。
又已知我们将使用 React ，也需要安装相应插件，运行 `npm i react react-dom --save`来安装两个插件。其中`i`是`install`的简写形式。安装完成之后，查看`package.json`可看到多了`devDependencies`和`dependencies`两项，根目录也多了一个`node_modules`文件夹。
 
3、`--save` 和 `--save-dev` 的区别
`npm i`时使用`--save`和`--save-dev`，可分别将依赖（插件）记录到`package.json`中的`dependencies`和`devDependencies`下面。
`dependencies`下记录的是项目在运行时必须依赖的插件，常见的例如`react` `jquery`等，即使项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行。
`devDependencies`下记录的是项目在开发过程中使用的插件，例如这里我们开发过程中需要使用`webpack`打包，但是一旦项目打包发布、上线了之后，`webpack`就都没有用了，可卸磨杀驴。
延伸一下，我们的项目有`package.json`，其他我们用的项目如`webpack`也有`package.json`，见`./node_modules/webpack/package.json`，其中也有`devDependencies`和`dependencies`。当我们使用`npm i webpack`时，`./node_modules/webpack/package.json`中的`dependencies`会被 npm 安装上，而`devDependencies`也没必要安装。
 
4、webpack.config.js
为了提高学习效率，webpack 最最基础的用法，就不再挨个演示了（推荐一个非常好的[ 入门文章]，以及[ 更多资料]）这里我们把项目中的`webpack.config.js`这个配置文件详细的讲解一下，过程中也会照顾 0 基础的同学。
webpack.config.js 就是一个普通的 js 文件，符合 commonJS 规范。最后输出一个对象，即`module.exports = {...}`
这个比较基础，不过需要新建`./app/index.js`作为入口文件，目前项目中只有这一个入口文件。不过 webpack 支持多个入口文件，可查阅文档。
输出就是一个`bundle.js`，js 和 css 都在里面，不过只有在开发环境下才用，发布代码的时候，肯定不能只有这么一个文件，接下来会讲到。
 
module
针对不同类型的文件，使用不同的`loader`，当然使用之前要安装，例如`npm i style-loader css-loader --save-dev`。该项目代码中，我们用到的文件格式有：js/jsx 代码、css/less 代码、图片、字体文件。
less 是 css 的语法糖，可以更高效低冗余的写 css，不熟悉的朋友可去[ 官网]看看，非常简单。
在加载 css/less 时用到了`postcss`，主要使用`autoprefixer`功能，帮助自动加 css3 的浏览器前缀，非常好用。
编译 es6 和 jsx 语法时，用到家喻户晓的`babel`，另外还需增加一个`.babelrc`的配置文件。
plugins
使用 html 模板（需要`npm i html-webpack-plugin --save-dev`），这样可以将输出的文件名（如`./bundle.js`）自动注入到 html 中，不用我们自己手写。手写的话，一旦修改就需要改两个地方。
使用热加载和自动打开浏览器插件
devServer
对 webpack-dev-server 的配置
npm start
在 package.json 中，输入以下代码，将这一串命令封装为`npm start`，这样就可以运行项目代码了。
  
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors"
}
 
代码中`NODE_ENV=dev`代表当前是开发环境下，这里的`"dev"`可被 js 代码中的`process.env.NODE_ENV`得到并做一些其他处理。
 
5、定义环境全局变量
以下定义，可使得代码通过`__DEV__`得到当前是不是开发模式。 

new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})

 


打开`./app/util/localStore.js`可以看到`if (__DEV__) { console.error('localStorage.getItem报错, ', ex.message) }`，即只有开发环境下才提示error，发布之后就不会提示了。（因为发布的命令中用到`NODE_ENV=production`）
 
6、生产环境的配置 webpack.production.config.js
开发环境下，可以不用考虑系统的性能，更多考虑的是如何增加开发效率。而发布系统时，就需要考虑发布之后的系统的性能，包括加载速度、缓存等。下面介绍发布用配置代码和开发用的不一样的地方。
发布到 `./build` 文件夹中 ： `path: __dirname + "/build",`
vendor
将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存，因为在项目维护过程中，第三方依赖不经常变化，而业务代码会经常变化。
md5后缀
为每个打包出来的文件都加md5后缀，例如`"/js/[name].[chunkhash:8].js"`，可使文件强缓存。
分目录
打包出来的不同类型的文件，放在不同目录下，例如图片文件将放在`img/`目录下
Copyright
自动为打包出来的代码增加 copyright 内容
分模块
`new webpack.optimize.OccurenceOrderPlugin(),`
压缩代码
使用 Uglify 压缩代码，其中`warnings: false`是去掉代码中的 warning
分离 css 和 js 文件
开发环境下，css 代码是放在整个打包出来的那个 bundle.js 文件中的，发布环境下当然不能混淆在一起，使用`new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),`将 css 代码分离出来。
 
7、npm run build
打开`package.json`，查看以下代码。`npm start`和`npm run build`分别是运行代码和打包项目。另外，`"start"、"test"`可以不用`run`。

  
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors",
"build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
},

 


这两个命令主要有以下区别：

- 前者中默认使用 webpack.config.js 作为配置文件，而后者中强制使用 webpack.production.config.js 作为配置文件
- 前者`NODE_ENV=dev`而后者`NODE_ENV=production`，标识不同的环境。而这个`"dev" "production"`可以在代码中通过`process.env.NODE_ENV`获取。
 
最小化压缩 React
以下配置可以告诉 React 当前是生产环境，请最小化压缩 js ，即把开发环境中的一些提示、警告、判断通通去掉，直流以下发布之后可用的代码。 

new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),

 接下来把开发代环境的配置和生产环境的配置贴上

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'app/index.js'),
    output: {
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
            { test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
            { test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
            { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' },  // 限制大小5kb
            { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
        ]
    },
    postcss: [
        require('autoprefixer') //调用autoprefixer插件，例如 display: flex
    ],
    plugins: [
        // html 模板插件
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.html'
        }),
        //  热加载
        new webpack.HotModuleReplacementPlugin(),
        // 打开浏览器
        new OpenBrowserPlugin({
            url: 'http://localhost:8080'
        }),
        //  可在业务js代码中使用 __DEV__ 判断是否是开发环境 (dev模式下可以提示错误、测试报告等, production模式不提示）
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')),
        })
    ],
    devServer: {
        proxy: {
          // 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:3000 上，由 koa 提供 mock 数据。
          // koa 代码在 ./mock 目录中，启动命令为 npm run mock
          '/api': {
            target: 'http://localhost:3000',
            secure: false
          }
        },
        colors: true, // 终端舒服为彩色
        historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, // 实时刷新
        hot: true, // 使用热加载插件 HotModuleReplacementPlugin
    }
}

webpack.production.config.js

var pkg = require('./package.json')
var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/index.js'),
    // 将 第三方依赖（node_modules中的） 单独打包
    vendor: Object.keys(pkg.dependencies)
  },
  output: {
    path: __dirname + "/build",
    filename: "/js/[name].[chunkhash:8].js"
  },

  resolve:{
      extensions:['', '.js','.jsx']
  },

  module: {
    loaders: [
        { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
        { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') },
        { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss') },
        { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' },
        { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'}
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("Copyright by Nick930826@github.com."),

    // html 模板插件
    new HtmlWebpackPlugin({
        template: __dirname + '/app/index.html'
    }),

    // 定义为生产环境，编译 React 时压缩到最小
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),

    // 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
    new webpack.optimize.OccurenceOrderPlugin(),

    new webpack.optimize.UglifyJsPlugin({
        compress: {
          //supresses warnings, usually from module minification
          warnings: false
        }
    }),

    // 分离CSS和JS文件
    new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),

    // 提供公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '/js/[name].[chunkhash:8].js'
    }),

    // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })
  ]
}

 

转载于:https://www.cnblogs.com/Nick-chen/p/6852162.html

相关文章：

  • jvm垃圾回收的过程
  • 到底什么是分布式锁，进程锁，线程锁
  • 晶振參数校定
  • 这样做能让nginx新能提升10倍
  • 查看项目错误信息
  • 简单说明String类为什么是final的
  • RocketMQ启动broker提示 错误:找不到或无法加载主类
  • CSS盒子模型
  • 总结HashMap和TreeMap的区别
  • Spring AOP中pointcut expression表达式解析 及匹配多个条件
  • typora+picgo+gitee，轻松搞定图片上传
  • 转载-C#事件的使用和讲解
  • 详细描述Error和Exception(运行期和编译期)的区别
  • 线程的生命周期以及状态
  • ArcGIS AddIn调用ArcMap自带的对话框
  • 【391天】每日项目总结系列128（2018.03.03）
  • Android单元测试 - 几个重要问题
  • android图片蒙层
  • java 多线程基础, 我觉得还是有必要看看的
  • JavaScript 奇技淫巧
  • Laravel5.4 Queues队列学习
  • springboot_database项目介绍
  • storm drpc实例
  • 海量大数据大屏分析展示一步到位：DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 码农张的Bug人生 - 见面之礼
  • 前端面试之闭包
  • 如何用vue打造一个移动端音乐播放器
  • 使用 QuickBI 搭建酷炫可视化分析
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 最近的计划
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​RecSys 2022 | 面向人岗匹配的双向选择偏好建模
  • ###51单片机学习（2）-----如何通过C语言运用延时函数设计LED流水灯
  • #【QT 5 调试软件后，发布相关：软件生成exe文件 + 文件打包】
  • #NOIP 2014# day.1 T2 联合权值
  • （八）五种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • （附源码）小程序 交通违法举报系统 毕业设计 242045
  • （十）【Jmeter】线程（Threads(Users)）之jp@gc - Stepping Thread Group (deprecated)
  • （完整代码）R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (转)Google的Objective-C编码规范
  • (转)菜鸟学数据库（三）——存储过程
  • （转）德国人的记事本
  • （转）项目管理杂谈-我所期望的新人
  • .describe() python_Python-Win32com-Excel
  • .NET 4 并行（多核）“.NET研究”编程系列之二 从Task开始
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .net core 依赖注入的基本用发
  • .NET CORE使用Redis分布式锁续命(续期)问题
  • .NET Micro Framework初体验
  • .Net Web项目创建比较不错的参考文章
  • .NET 表达式计算：Expression Evaluator
  • .NET 跨平台图形库 SkiaSharp 基础应用