本文是全面的Webpack与React基础教程，适合前端开发者学习。讲解了如何使用Webpack配置source map，包括不同选项的优缺点，推荐在开发阶段使用eval-source-map。此外，还介绍了如何安装和配置React、Babel，使用ES6语法书写React组件，并通过webpack-dev-server实现热模块替换(HMR)功能，提升开发效率。文章最后提到了前端性能优化的关键点，如Webpack打包文件体积过大和移动端性能优化等。
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
| devtool选项 | 配置结果 |
| — | — |
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度 |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便 |
| eval-source-map | 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项 |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点 |
文／zhangwang（简书作者）
正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。
在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它，继续上面的例子，进行如下配置
//webpack.config.js
module.exports = {
devtool: ‘eval-source-map’,//生成Source Maps,这里选择eval-source-map
entry: __dirname + ‘/app/main.js’,//唯一入口文件,__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
output: {//输出目录
path: __dirname + ‘/build’,//打包后的js文件存放的地方
filename: ‘bundle.js’//打包后输出的js的文件名
}
};
安装React
=======
在终端输入npm install --save-dev react react-dom同时安装React和React-DOM
标准的React组件后缀名为.jsx，而.jsx是默认不被浏览器所支持的；所以需要一个转换器，将不被浏览器识别的.jsx文件转换成浏览器能够正常运行的文件，这个转换器就是Babel
安装和配置Babel
==========
文／zhangwang（简书作者）
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
-
下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
-
使用基于JavaScript进行了拓展的语言，比如React的JSX
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
用npm一次性安装这些依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
Babel其实可以完全在webpack.config.js中进行配置
但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 “.babelrc” 的配置文件中。
我们现在的babel的配置并不算复杂，不过之后我们会再加一些东西，因此现在我们就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：
在webpack.config.js中
//webpack.config.js
module.exports = {
devtool: ‘eval-source-map’,//生成Source Maps,这里选择eval-source-map
entry: __dirname + “/app/main.js”,//唯一入口文件
output: {//输出目录
path: __dirname + “/build”,//打包后的js文件存放的地方
filename: “bundle.js”//打包后输出的js的文件名
},
module: {
//loaders加载器
loaders: [
{
test: /.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: ‘babel’//loader的名称（必须）
}
]
}
};
在项目根目录下新建.babelrc文件，没错你没看错，就是只有后缀名的文件，添加如下代码：
//.babelrc
{
“presets”: [
“react”,
“es2015”
]
}
这时已将babel配置完成，可以使用JSX和ES6的语法了。
使用ES6书写React组件
==============
在app->components目录下新建一个Component.jsx文件（注意首字母一定要大写），使用ES6语法返回一个React组件，代码如下：
//Component1.jsx
import React from ‘react’;
class Component1 extends React.Component {
render() {
return (
)
}
}
//导出组件
export default Component1;
在main.js中使用ES6的语法，定义和渲染Component1模块，将React组件渲染至html的标签中：
//main.js
import React from ‘react’;
import ReactDom from ‘react-dom’;
import Component1 from ‘./components/Component1.jsx’;
ReactDom.render(
,
document.getElementById(‘content’)
);
如果你使用的是webstorm，可能会报这个错Import declarations are not supported by current JavaScript version
解决的方法是File->Settings->Languages&Frameworks->JavaScript，将JavaScript language version改为ECMAScript6
也可能会报这个错Switch language level to JSX Harmony
在弹出栏，点击switch即可
这样，我们已经将React组件渲染至Html之中了，使用npm start命令重新打包，打包完成后在webstorm中预览index.html文件，即可看到Hello World！
每次修改完代码，都需要重新打包才能看到变化吗？
Facebook的前端大神们怎么可能会容忍每次都手动打包呢？
我们可以使用webpack-dev-server来搭建本地开发服务器，修改代码后，立即可以看到变化；所见即所得，大大增加开发效率。
安装并启用webpack-dev-server
=======================
文／zhangwang（简书作者）
想不想让你的浏览器监测你都代码的修改，并自动刷新修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
在终端输入，安装webpack-dev-server
npm install --save-dev webpack-dev-server
在webpack.config.js中配置webpack-dev-server，在这里需要修改下entry的路径，给它加一个webpack/hot/dev-server，这里会用到Hot Module Replacement（热替换）插件，所以需要增加这个前缀，后文会提到，代码如下：
//webpack.config.js
module.exports = {
devtool: ‘eval-source-map’,//生成Source Maps,这里选择eval-source-map
entry: [‘webpack/hot/dev-server’, __dirname + ‘/app/main.js’],//唯一入口文件,__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录
output: {//输出目录
path: __dirname + ‘/build’,//打包后的js文件存放的地方
filename: ‘bundle.js’//打包后输出的js的文件名
},
module: {
//loaders加载器
loaders: [
{
test: /.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
loader: ‘babel’//loader的名称（必须）
}
]
},
//webpack-dev-server配置
devServer: {
contentBase: ‘./build’,//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）
colors: true,//在cmd终端中输出彩色日志
historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
inline: true,//设置为true，当源文件改变时会自动刷新页面
port: 8080,//设置默认监听端口，如果省略，默认为"8080"
process: true,//显示合并代码进度
}
};
在package.json中配置启动webpack-dev-server的命令
//package.json，注意：在实际使用过程中package.json不能有任何注释
{
…
“scripts”: {
“start”: “webpack”,
“dev”:“webpack-dev-server”
},
…
}
这时，我们可以启动webpack-dev-server服务器，看看是否能够实时预览
在终端里输入
npm run dev
如果终端输出一大堆日志后，提示webpack: bundle is now VALID则代表本地服务器启动成功，如果需要停止服务，在终端按ctrl+c，按提示输入Y即可（如果不行多按几次…）
在浏览器中输入http://localhost:8080，可以看到，打开了一个空页面，并没有显示Hello World；按F12打开控制台，可以清除地看到错误提示：Uncaught Error: [HMR] Hot Module Replacement is disabled
所以我们来安装和配置这个Hot Module Replacement。
Hot Module Replacement
======================
文／zhangwang（简书作者）
Hot Module Replacement（HMR）是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只需要做两项配置
- 在webpack配置文件中添加HMR插件；
- 在Webpack Dev Server中添加“hot”参数；
不过配置完这些后，JS模块其实还是不能自动热加载的，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。
整理下我们的思路，具体实现方法如下
- Babel和webpack是独立的工具
-
二者可以一起工作
-
二者都可以通过插件拓展功能
-
HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，但是如果你想让它工作，需要对模块进行额外的配额；
-
Babel有一个叫做react-transform-hrm的插件，可以在不对React模块进行额外的配置的前提下让HMR正常工作；
在webpack.config.js中配置如下：
//webpack.config.js
var webpack = require(‘webpack’);//引入Webpack模块供我们调用，这里只能使用ES5语法，使用ES6语法会报错
module.exports = {
devtool: ‘eval-source-map’,
entry: [‘webpack/hot/dev-server’, __dirname + ‘/app/main.js’],
output: {
path: __dirname + ‘/build’,
filename: ‘bundle.js’
},
module: {
loaders: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
loader: ‘babel’
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()//热模块替换插件
],
devServer: {
contentBase: ‘./build’,
colors: true,
historyApiFallback: true,
inline: true,
port: 8080,
process: true
}
};
其实，这时候已经可以正常工作了；在终端输入npm run dev，待命令行提示webpack: bundle is now VALID后，在浏览器中输入http://localhost:8080，可以看到，正常显示Hello World
在webstorm中更改React返回的内容，ctrl+s即可看到浏览器页面同步刷新，所见即所得
如果觉得这样不放心，让我们谨遵医嘱，进行如下额外配置
安装react-transform-hmr，在不对React模块进行额外的配置的前提下让HMR正常工作
npm install --save-dev babel-plugin-react-transform react-transform-hmr
在.babelrc文件里配置babel，注意这里有一堆括号，别写错了
//.babelrc
{
“presets”: [
性能优化
1.webpack打包文件体积过大？（最终打包为一个js文件）
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
{
“presets”: [
性能优化
1.webpack打包文件体积过大？（最终打包为一个js文件）
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
扫一扫
6232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
