[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: 0;
    padding: 0;
}
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內嵌到瀏覽器