webpack学习记录二 各种Loader的使用

各种Loader的使用

前期准备：整理目录建立相关文件

layer.html

layer.js

layer.less

app.js

index.html

 

babel-loader 转换ES6代码

将es6等转换为浏览器可以直接处理的JS，需使用预处理js的loader：babel

第一步要安装babel-loader： 命令行输入npm i --save-dev babel-loader babel-core

第二步配置babel使其可以转化指定版本的js，如es2015，使用presers进行配置  指定完之后需安装 npm install --save-dev babel-preset-env

第三步 使用loader并进行相关配置

像上述这样操作的过程中出错了，百度查原因，最后进行了以下的安装

npm uninstall babel-loader

npm install babel-loader@7.1.5

最后我的各个文件内容如下：

webpack.config.js

layer.js稍作了一些修改，暂时不使用import带入HTML模板：

 

处理项目中的CSS 使用css-loader和style-loader

处理css文件中，这两个loader各自的作用：

• css-loader: 只负责加载css模块,不会将加载的css样式应用到html
• style-loader: 负责将css-loader加载到的css样式动态的添加到html-head-style标签中

首先安装这两个loader： npm i style-loader css-loader --save-dev

新建一个css文件，文件位置与内容如下：

在app.js中导入css文件：