1. babel
①在命令列安裝babel，命令列：npm install --save-dev babel-core babel-loader babel-preset-es2015
②在webpack.config.js中的module項配置：

module:{
    rules: [  //匹配規則
        test: /.js$/,  //一個用以匹配loaders所處理檔案的擴充名的正規表示式（必須）
        use: {
            loader: 'babel-loader'  //loader的名稱（必須）
        },
        exclude: /node_modules/  //遮蔽不需要處理的檔案（資料夾）（可選）；
    ]
}

③再建立.babelrc檔案並配置

{"preset":["es2015"]}

這樣你就可以愉快的使用es6來編碼了

2. CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中

①在命令列安裝css-loader和style-loader，命令列：

npm install --save-dev css-loader style-loader

②在webpack.config.js中的module項配置：

module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }

③再自行建立一個css檔案

④在main.js中引入 import './css/main.css';

通常情況下，css會和js打包到同一個檔案中，並不會打包為一個單獨的css檔案，不過透過合適的配置webpack也可以把css打包為單獨的檔案的。

CSS Module

CSS modules 的技術就意在把JS的模組化思想帶入CSS中來，透過CSS模組，所有的類名，動畫名預設都只作用於當前模組。Webpack從一開始就對CSS模組化提供了支援，在CSS loader中進行配置後，你所需要做的一切就是把”modules“傳遞到所需要的地方，然後就可以直接把CSS的類名傳遞到元件的程式碼中，且這樣做只對當前元件有效，不必擔心在不同的模組中使用相同的類名造成衝突。

①在webpack.config.js的css-loader規則里加option屬性，

                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }

②建立一個css檔案

③匯入到你想放的模組中，如：我匯入到hello.js中

import config from './data/hello.json';
import styles from './css/hello.css';//匯入
module.exports = function() {
    var hello = document.createElement('div');
    hello.textContent = config.helloText;
    hello.className = styles.root;//增加類名
    return hello;
};

這樣就可以了

3. 外掛（Plugins）

外掛（Plugins）是用來擴充Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理原始檔的（JSX，Scss，Less..），一次處理一個，外掛並不直接操作單個檔案，它直接對整個構建過程其作用。

要使用某個外掛，我們需要透過npm安裝它，然後要做的就是在webpack配置中的plugins關鍵字部分新增該外掛的一個例項（plugins是一個陣列）

HtmlWebpackPlugin

這個外掛的作用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS檔案的新index.html。這在每次生成的js檔名稱不同時非常有用（比如新增了hash值）。

①安裝html-webpack-plugin，npm install --save-dev html-webpack-plugin

②把原來的index.html改名為index.tmpl.html，並放到app資料夾目錄下

③在webpack.config.js中引入html-webpack-plugin外掛，並在module中配置plugins

const path = require('path');
// const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// __dirname變數獲取當前模組檔案所在目錄的完整絕對路徑
module.exports = {
    // devtool: 'eval-source-map',
    entry: __dirname + '/app/main.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),//出口
        filename: 'bundle.js'  //輸出的檔名
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true//實時重新整理
        // port:設定預設監聽埠，如果省略，預設為”8080“
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        })
    ]
};

④在命令列重新編譯和重啟

npm run start

npm run server

學習webpack (v3.8.1)筆記（二）——loader和plu

相關文章