webpack4.0入门指南(二)转换es7语法解析静态资源
栏目: JavaScript · 发布时间: 5年前
内容简介:之前写了怎么转换es6的语法,如果在项目中用了es7的语法和样式,图片,字体该如何配置,下面就写一下配置。把之前demo3文件夹一份命名为demo4。 修改demo4/src/index.js文件安装babel插件,在项目根目录执行命令
之前写了怎么转换es6的语法,如果在项目中用了es7的语法和样式,图片,字体该如何配置,下面就写一下配置。
转换es7语法
把之前demo3文件夹一份命名为demo4。 修改demo4/src/index.js文件
let obj = {name: 'lanpangzhi'}; let obj2 = {blog: 'http://blog.langpz.com'}; let newObj = {...obj, ...obj2}; // es7语法 console.log(newObj); 复制代码
安装babel插件,在项目根目录执行命令
npm install babel-preset-stage-0 -D // ES7不同阶段语法提案的转码规则(共有4个阶段) 复制代码
stage-0 包含 stage-1 stage-2 stage-3 阶段 还包含 babel-plugin-transform-do-expressionsbabel-plugin-transform-function-bind 两个插件的功能, 阶段标准
修改demo4/.babelrc文件
{ "presets": ["env","stage-0"] } 复制代码
在demo4路径下执行 webpack,就看到打包成功了打开demo4/index.js文件控制台就输出。 {name: "lanpangzhi", blog: "blog.langpz.com"}
解析CSS
为了从 JavaScript 模块中 import 一个 CSS 文件,你需要配置如下loader。 安装babel插件,在项目根目录执行命令。
npm install --save-dev style-loader css-loader 复制代码
修改demo4/webpack.config.js文件 在rules数组里添加一个规则。
{ test: /\.css$/, // 匹配所有.css结尾的文件 use: [ // use要从右往左写,先转成样式,再打包到style标签 'style-loader', 'css-loader' ] } 复制代码
创建css文件
cd src && touch index.css 复制代码
修改demo4/src/index.css文件
body { background: red; } 复制代码
引入css文件 修改demo4/src/index.js文件
// 最上面添加一行 import './index.css'; 复制代码
在demo4路径下执行 webpack,就看到打包成功。打开demo4/index.html就有红色的背景色了。
解析sass
为了从 JavaScript 模块中 import 一个 scss 文件,你需要配置如下loader。 安装babel插件,在项目根目录执行命令。
npm install sass-loader node-sass webpack --save-dev 复制代码
修改demo4/webpack.config.js文件,在rules数组里添加一个规则。
{ test: /\.scss$/, // 匹配所有.scss结尾的文件 use: [ 'style-loader', // 将 JS 字符串生成为 style 节点 'css-loader', // 将 CSS 转化成 CommonJS 模块 'sass-loader' // 将 Sass 编译成 CSS ] } 复制代码
创建scss文件
cd src && touch index.scss 复制代码
修改demo4/src/index.scss文件
$body-color: yellow; body { background: $body-color; } 复制代码
修改demo4/src/index.js文件
// 最上面一行替换如下代码 import './index.scss'; 复制代码
在demo4路径下执行 webpack,就看到sass编译成功。打开demo4/index.html就有绿色的背景色了。 !()[ hexo-1252491761.file.myqcloud.com/webpack4.0入… ] 如果你想解析其他预处理css语言安装对应loader,添加规则就可以编译了。 如less less-loader。
解析图片
假想,现在我们正在下载 CSS,但是我们的背景和图标这些图片,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中。 安装babel插件,在项目根目录执行命令。
npm install --save-dev file-loader 复制代码
随意再网上下载一个png图片放到demo4/src/目录下,命名为1.png
修改demo4/src/index.scss文件
body { background: url(./1.png); } 复制代码
修改demo4/webpack.config.js文件,在rules数组里添加一个规则。
{ test: /\.(png|svg|jpg|gif)$/, // 匹配所有.png和.svg和.jpg和.gif结尾的文件 use: [ { loader: 'file-loader', options: { publicPath: 'dist/' // 设置public 发布目录。 } } ] } 复制代码
在demo4路径下执行 webpack,就看到图片编译成功。打开demo4/index.html就有背景图。
加载字体
像字体这样的其他资源如何处理呢?file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。这就是说,我们可以将它们用于任何类型的文件,包括字体。让我们更新 webpack.config.js 来处理字体文件。 修改demo4/webpack.config.js文件,在rules数组里添加一个规则。
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } 复制代码
如果样式文件里面引入了字体就会被打包,这里就不演示了。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python神经网络编程
[英]塔里克·拉希德(Tariq Rashid) / 林赐 / 人民邮电出版社 / 2018-4 / 69.00元
神经网络是一种模拟人脑的神经网络,以期能够实现类人工智能的机器学习 技术。 本书揭示神经网络背后的概念,并介绍如何通过Python实现神经网络。全书 分为3章和两个附录。第1章介绍了神经网络中所用到的数学思想。第2章介绍使 用Python实现神经网络,识别手写数字,并测试神经网络的性能。第3章带领读 者进一步了解简单的神经网络,观察已受训练的神经网络内部,尝试进一步改......一起来看看 《Python神经网络编程》 这本书的介绍吧!