[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

Posted ghostwu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法相关的知识,希望对你有一定的参考价值。

[js高手之路]深入浅出webpack教程系列索引目录:

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等.

官方参考文档:https://webpack.js.org/loaders/

我们从本文开始,重新搭建一个项目结构来解释下loader的用法.

一、项目结构搭建准备:

目录结构:

 1 demo3
 2     dist
 3     src
 4         components
 5             modal.html
 6             modal.js
 7             modal.less
 8         main.js
 9     index.html
10     package.json
11     webpack.config.js

需要安装的插件等:

1,npm init --yes( 初始化项目的package.json )

2,npm install webpack@3.5.6 -g ( 全局安装webapck )

3,npm install webpack@3.5.6 --save-dev (局部安装webpack )

4,npm install html-webpack-plugin --save-dev ( 安装html-webpack-plugin插件 )

相关的文件代码:

webpack.config.js代码

 1 var htmlWebpackPlugin = require(\'html-webpack-plugin\');
 2 module.exports = {
 3     entry : \'./src/main.js\',
 4     output : {
 5         path : __dirname + \'/dist\',
 6         filename : \'js/[name].bundle.js\',
 7     },
 8     plugins : [
 9         new htmlWebpackPlugin({
10             filename : \'index.html\',
11             template : \'index.html\',
12             inject : true
13         })
14     ]
15 }

main.js文件代码:

1 import modal from \'./components/modal.js\';
2 let App = function(){
3     console.log( \'项目入口文件main.js\' );
4 }
5 new App();

modal.html文件代码:

1 <div class="modal">
2     <div class="modal-heading">模态框头部 - by ghostwu</div>
3     <div class="modal-body">模态框内容部分 - by ghostwu</div>
4 </div>

modal.js文件代码:

2 let modal = function(){
3     return {
4         \'component-name\' : \'modal\'
5     }
6 }
7 export default modal;

modal.less文件代码:

 1 @c1 : #09f;
 2 @c2 : #666;
 3 .modal {
 4     padding:20px;
 5     div {
 6         margin: 10px;
 7     }
 8 }
 9 .modal-heading {
10     background:@c1;
11 }
12 .modal-body {
13     background:@c2;
14 }

写完上面的结构和代码之后,我们开始执行webpack打包命令,然后安装babel-loader,把es6转成es5

官方参考文档:https://webpack.js.org/loaders/babel-loader/

安装:  npm install --save-dev babel-loader babel-core babel-preset-env webpack

配置webpack.config.js文件

 

 1 var htmlWebpackPlugin = require(\'html-webpack-plugin\');
 2 let path = require(\'path\');
 3 module.exports = {
 4     entry: \'./src/main.js\',
 5     output: {
 6         path: __dirname + \'/dist\',
 7         filename: \'js/[name].bundle.js\',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: \'index.html\',
12             template: \'index.html\',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: \'babel-loader\',
26                     options: {
27                         presets: [\'env\']
28                     }
29                 }
30             }
31         ]
32     }
33 }

 解释下新增加的配置:

rules就是配置规则,他是一个数组,每一项为一个对象,如果有多个loader,那就用多个对象, test: /\\.js$/ 就是以.js结尾的文件, exclude:排除node_modules这个目录,意思就是不要去这个目录下处理.js的文件,有什么好处呢?大大提高打包的速度. include里面的配置意思就是把src目录下面的js文件作为处理的目标,use配置就是使用babel-loader

二、使用css

 1,在src目录下新建一个css目录,在该目录下面新建一个css文件: style.css,代码如下:

 1 html,body{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     background: #08f;
 7 }
 8 ul,li {
 9     list-style-type:none;
10 }
11 div {
12     transition: all ease 1s;
13 }

然后在main.js中导入css文件

1 import modal from \'./components/modal.js\';
2 import \'./css/style.css\';
3 let App = function(){
4     console.log( \'项目入口文件main.js\' );
5 }
6 new App();

执行webpack打包命令,会报错,提示需要一个loader,我们安装css-loader和style-loader

安装命令: npm install css-loader style-loader --save-dev

官方参考文档:https://webpack.js.org/loaders/css-loader/

然后配置webpack.config.js:

 1 var htmlWebpackPlugin = require(\'html-webpack-plugin\');
 2 let path = require(\'path\');
 3 module.exports = {
 4     entry: \'./src/main.js\',
 5     output: {
 6         path: __dirname + \'/dist\',
 7         filename: \'js/[name].bundle.js\',
 8     },
 9     plugins: [
10         new htmlWebpackPlugin({
11             filename: \'index.html\',
12             template: \'index.html\',
13             inject: true
14         })
15     ],
16     module: {
17         rules: [
18             {
19                 test: /\\.js$/,
20                 exclude: /(node_modules)/,
21                 include: [
22                     path.resolve(__dirname, "src"),
23                 ],
24                 use: {
25                     loader: \'babel-loader\',
26                     options: {
27                         presets: [\'env\']
28                     }
29                 }
30             },
31             {
32                 test: /\\.css$/,
33                 exclude: /(node_modules)/,
34                 use: [
35                     \'style-loader\',
36                     \'css-loader\'
37                 ]
38             }
39         ]
40     }
41 }

执行webpack打包, 你就能看到css被内嵌到文档中了, css-loader是处理css文件,style-loader是把css内嵌到浏览器

以上是关于[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法的主要内容,如果未能解决你的问题,请参考以下文章

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法