前端自动化构建入门6-使用webpack改造我们的react应用

认识webpack

webpack是一个简单方便的模块打包工具，你可以利用webpack对你代码进行分块打包、代码转译。webpack是目前最流行的模块打包工具之一。

更详细的介绍可以参照这里。

注意：以下实例均为目前webpack的最新版本webpack 3.0。不同的版本，配置也会有些许不同，可以关注webpack官方网站的详细说明。

安装webpack

//安装到项目目录 并保存配置到package.json文件中
npm install --save-dev webpack

安装webpack-dev-server

webpack-dev-server是webpack提供的一个本地开发服务器，我们可以使用它启动一个web站点来浏览我们的页面。

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

安装babel

babel是一个语法编译器，它可以将浏览器不识别的语法转译为es5代码，如：jsx、es6。我们之所以能使用各种新兴的技术与语法，babel这类工具功不可没。

安装babel核心文件

npm install --save-dev babel-loader babel-core babel-preset-env webpack

安装语法编译

由于es出现了各种语法糖以及新的版本，仅还在提案中的es7就有5种（stage 0、stage 1、stage 2、stage 3、stage 4）。

为了解决需求，babel出现了很多语法编译工具，可以详细查看这里。

安装react的语法编译

npm install --save-dev babel-cli babel-preset-react

安装loader

babel有各种各样的loader，不同的loader有不同的功能，可以加载不同的文件。更多loader可以点击这里。

样式加载

npm install style-loader --save-dev
npm install --save-dev css-loader

文件加载

npm install --save-dev url-loader

配置webpack

webpack同样有一个配置文件，我们需要手动创建它。上个步骤我们安装了一下loader，那么什么时候使用这些loader，以及loader的一些选项配置，则需要在配置文件中进行详细设定。

在项目根目录下新建一个webpack.config.js文件。

配置好的webpack.config.js如下：

配置package.json

将scripts更改为以下内容

"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}

加上之前我们通过npm install xx –save-dev更改的配置文件，

最终的package.json文件如下：

更改index.html文件

之前index页面没有加载任何js文件，现在需要在此页面引入webpack打包后的主文件，这个主文件路径及名称是我们在webpack.config.js中配置好的。

更改的地方只有2处。如下图：

预览改造后的页面

同样，在控制台窗口中输入 npm start，启动成功后，打开浏览器，输入站点地址。

效果如下：

结语

至此，我们已经完成了整个前端自动构建的过程，学习了webpack的各种配置。郑重说明，此系列教程仅作为前端自动化入门的参考教程，故很多点并未深入探究，仅作为前端自动化中的“hello word”。

需要深入探究的朋友可以通过文章中的相关链接做深入了解。