webpack 入门实践（二）

在开始简体分享前，先介绍一下 ES6（2015）和 Sass 。

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

今天主流的浏览器都已经支持 es6 语法，所以大家可以放心大胆地去遵循 es6 写 javascript。

sasscss预处理器，并不是css的替代品，它只是让css变得更加高效、可维护。

他们已经不是让人眼前一亮的新鲜事物了，今天大多数项目都会用到以上两种技术（说技术有点不算贴切）。今天我们将上次项目进行修改，用到以上两种技术。

创建一个 _colors.scss ，在这个文件中，我们只需要定义一个颜色变量。这个变量可供其他 scss 文件使用。

然后我们将 list.css 文件的内容合并到 main.css，将 main.css 重新命名为 main.scss. 并在 main.scss 中使用 _colors.scss 中定义好的变量 $primary

在 app.js 中我们使用 => (arrow function) 来代替原有 function 写法。并使用 const（静态变量）来替换 var ，const 和 arrow function 都是 es6 的新特性。

我们看一看现在项目结构

然后我们要在 app.js 中引用一下 main.scss 文件。

需要使用 npm install 安装一下依赖

sass-loader node-sass css-loader( 这些模块用于加载 sass 文件 sass-loader 是 sass 文件的加载器，要将 sass 编译为 css 我们就需要安装 node-sass，最后使用 css-loader 来加载编译好的 css，这里我们没有用 style-loader 来将 css 写入 js 文件，而是使用 extract-text-webpack-plugin 插件将 css 文件分离到独立的 css 文件供 html 引用)

extract-text-webpack-plugin

babel-core babel-loader loader-preset-es2015（用 babel 将 es2015 降级编译都几乎所有浏览器都支持的 es3, 用到预设 es2015 插件。

如何具体使用 babel 加载器以将 es2015 编译为 es3 的方法如下图，其中值得注意是 options 的使用方法，我们在 options 中对 babel 编译方式进行预设为 es2015

现在引入 extract-text-webpack-plugin 插件，创建一个实例，创建时需要配置一下，提取出文件的名称为 main.css。

在加载时，我们使用 extraTextPlugin 来提取加载后的 css 文件。

这里值得注意的是，['css-loader','sass-loader'] 的加载顺序其实是从右到左的，也就是先用 sass-loader 加载 scss 文件，然后再用 css-loader 来加载编译好的 css 文件。

我们还需要在 plugins 中添加 extraTextPlugin 插件

最后，您可以运行 npm run build 和 npm run build:prod 看效果