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

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

• [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
• [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
• [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
• [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
• [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
• [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
• [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
• [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
• [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

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

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

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

一、项目结构搭建准备：

目录结构：

 demo3
     dist
     src
         components
             modal.html
             modal.js
             modal.less
         main.js
     index.html
     package.json
     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代码

 var htmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
     entry : './src/main.js',
     output : {
         path : __dirname + '/dist',
         filename : 'js/[name].bundle.js',
     },
     plugins : [
         new htmlWebpackPlugin({
             filename : 'index.html',
             template : 'index.html',
             inject : true
         })
     ]
 }

main.js文件代码:

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

modal.html文件代码:

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

modal.js文件代码:

 let modal = function(){
     return {
         'component-name' : 'modal'
     }
 }
 export default modal;

modal.less文件代码:

 @c1 : #09f;
 @c2 : #666;
 .modal {
     padding:20px;
     div {
         margin: 10px;
     }
 }
 .modal-heading {
     background:@c1;
 }
 .modal-body {
     background:@c2;
 }

写完上面的结构和代码之后，我们开始执行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文件

 var htmlWebpackPlugin = require('html-webpack-plugin');
 let path = require('path');
 module.exports = {
     entry: './src/main.js',
     output: {
         path: __dirname + '/dist',
         filename: 'js/[name].bundle.js',
     },
     plugins: [
         new htmlWebpackPlugin({
             filename: 'index.html',
             template: 'index.html',
             inject: true
         })
     ],
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /(node_modules)/,
                 include: [
                     path.resolve(__dirname, "src"),
                 ],
                 use: {
                     loader: 'babel-loader',
                     options: {
                         presets: ['env']
                     }
                 }
             }
         ]
     }
 }

解释下新增加的配置：

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

二、使用css

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

 html,body{
     margin:;
     padding:;
 }
 body {
     background: #08f;
 }
 ul,li {
     list-style-type:none;
 }
 div {
     transition: all ease 1s;
 }

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

 import modal from './components/modal.js';
 import './css/style.css';
 let App = function(){
     console.log( '项目入口文件main.js' );
 }
 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:

 var htmlWebpackPlugin = require('html-webpack-plugin');
 let path = require('path');
 module.exports = {
     entry: './src/main.js',
     output: {
         path: __dirname + '/dist',
         filename: 'js/[name].bundle.js',
     },
     plugins: [
         new htmlWebpackPlugin({
             filename: 'index.html',
             template: 'index.html',
             inject: true
         })
     ],
     module: {
         rules: [
             {
                 test: /\.js$/,
                 exclude: /(node_modules)/,
                 include: [
                     path.resolve(__dirname, "src"),
                 ],
                 use: {
                     loader: 'babel-loader',
                     options: {
                         presets: ['env']
                     }
                 }
             },
             {
                 test: /\.css$/,
                 exclude: /(node_modules)/,
                 use: [
                     'style-loader',
                     'css-loader'
                 ]
             }
         ]
     }
 }

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