React Webpack使用

1.webpack简介

项目中可能有多个 .js、.css 、image、其他资源。一些 js 资源彼此之前存在依赖关系，当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度。为了解决这个问题，webpack将各种各样的静态资源，打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。

2.webpack运行环境

node.js

3.使用前准备

a.安装 webpack  npm i -g webpack

b.项目根目录下新建webpack_config文件夹（即与src同级，命名文件夹不要使用webpack）

c.根据项目需求，建.js文件（base.js、development.js、staging.js、production.js）

d.package.json中写入脚本文件，npm 运行命令

"scripts": { 

"dev": "webpack-dev-server --host 0.0.0.0 --progress --config ./webpack_config/development.js", 

"test": "cross-env NODE_ENV=test webpack --progress --colors --config ./webpack_config/development.js",

 "staging": "cross-env NODE_ENV=staging webpack --progress --colors --config ./webpack_config/staging.js

"prod": "cross-env NODE_ENV=production webpack --progress --colors --config ./webpack_config/production.js"

}

4.process.env.NODE_ENV

a.NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量,赋值给process.env对象

b.cross-env提供跨平台的设置和使用环境变量

c.NODE_ENV定义方式有两种：npm脚本定义&DefinePlugin、mode选项定义，两种定义方式相互独立

c1:NODE_ENV=development定义（即npm脚本定义）的NODE_ENV只能在当前脚本中生效，runtime（运行时）生效

c2:base.js的mode设置为production，脚本中执行NODE_ENV=development，那么在模块中NODE_ENV的值为production，而配置文件base.js中的NODE_ENV值为development。如果没有在脚本中设置环境变量，只设置了mode，在webpack的配置文件中读取process.env.NODE_ENV为undefined

d.DefinePlugin和mode选项定义的NODE_ENV 作用于webpack入口文件下的业务代码，通常为src文件夹下的代码， 而 npm脚本里的设置多用于配置相关，例如在webpack.config.js里区分环境配置不同插件

Tips

a.webpack-dev-server :微服务器

b.热更新： 当base.js 中的 entry 文件改变，自动运行 webpack, 自动刷新页面（只针对入口文件.js，不作用于html、css）

c.babel:ES6转ES5

d.css-loader 、style-loader 把 css 文件作为一个模块打包到js 文件

e.****DefinePlugin设置环境变量：

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

f.publicPath:一定要是绝对路径