认识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”。
需要深入探究的朋友可以通过文章中的相关链接做深入了解。