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 看效果

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180226G02N7000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励