【01】webpack4 快速上手

本文適合新手快速上手webpack4，只講應用，也比較淺。

開啓 webpack 之旅

1、簡易配置

一、初始化項目

　　npm init

//packge.json 文件中
"scripts": {    
    "build": "webpack  --profile --progress --colors --display-error-details",    
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details"  
}, 
//color 輸出結果帶彩色，好比：會用紅色顯示耗時較長的步驟
//profile 輸出性能數據，能夠看到每一步的耗時
//progress 輸出當前編譯的進度，以百分比的形式呈現
//display-modules 默認狀況下 node_modules 下的模塊會被隱藏，加上這個參數能夠顯示這些被隱藏的模塊
//display-error-details 輸出詳細的錯誤信息

二、安裝webpack

　　全局安裝：npm install webpack -g
　　本地安裝：npm install webpack webpack-cli -D

三、webpack核心概念

　　Entry：　入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
　　Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。
　　Chunk： 代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。
　　Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
　　Plugin： 擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。
　　Output：輸出結果，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果。

四、配置 webpack.config.js

let path = require('path');//node的模塊
module.exports = {
    entry:'./src/index.js',//入口文件
    output:{
        filename:'build.js',//出口文件
        // 這個路徑必須是絕對路徑
        path: path.resolve('./dist')
    }, 
    devServer:{},// 開發服務器
    module:{}, // 模塊配置
    plugins:[], // 插件的配置
    mode:'development', // 能夠更改模式
    resolve:{}, // 配置解析
}

　　到這裏使用命令 npm run dev 或者 npm run build 便可打包 js 文件。

2、配置開發服務器

　　npm i webpack-dev-server –D

//webpack.config.js
devServer:{
    contentBase:path.resolve(__dirname,'dist'),// 配置開發服務運行時的文件根目錄
    host:'localhost',// 開發服務器監聽的主機地址
    compress:true,   // 開發服務器是否啓動gzip等壓縮
    port:8080,       // 開發服務器監聽的端口
    open:true         // 是否自動打開瀏覽器
}

//package.json
"scripts": {
    "dev": "webpack-dev-server --open --mode development "
}
//開啓本地服務 npm run dev
//--mode development開發環境 或者--mode production生產環境

3、配置module

　　test：匹配處理文件的擴展名的正則表達式

　　use：loader名稱，就是你要使用模塊的名稱

　　include/exclude:手動指定必須處理的文件夾或屏蔽不須要處理的文件夾

　　query：爲loaders提供額外的設置選項

一、支持加載css文件

　　npm install style-loader css-loader -D

module: {
    rules:[
       {
            test:/\.css$/,
            use:['style-loader','css-loader'],
            include:path.join(__dirname,'./src'),
            exclude:/node_modules/
       }        
    ]
}
//注意：加載器的加載順序爲從右至左。即先用css-loader解析而後用style-loader將解析後的css文件添加到Head標籤中。

二、支持圖片

　　npm install file-loader url-loader html-withimg-loader -D

module: {
    rules:[ 
       {
            test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
            loader: {
                loader: 'url-loader',
                options: {
                    limit: 5 * 1024,// 圖片大小 > limit 使用file-loader, 反之使用url-loader
                    outputPath: 'images/'// 指定打包後的圖片位置
                }
            }
        }
    ]
}

//usage - 手動添加圖片：
let logo = require('./images/logo.png');
let img = new Image();
img.src = logo;
document.body.appendChild(img);

//usage - 在CSS中引入圖片
.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

//usage - 在HTML中使用圖片
{
    test:/\.(html|html)$/,
    use:'html-withimg-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
}

三、編譯less 和 sass

　　npm install less less-loader node-sass sass-loader -D

//把編譯好的代碼放到head裏面
module: {
    rules:[ 
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            loader: ['style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            loader: ['style-loader', 'css-loader']
        }
    ]
}

四、處理css3屬性前綴

　　npm install postcss-loader autoprefixer -D

//postcss.config.js 文件
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

//把 post-laoder push 到css的loader數組中
module: {
    rules:[ 
        {
            test: /\.css$/,
            loader: ['style-loader', 'css-loader', 'postcss-loader']
        }, {
            test: /\.less$/,
            loader: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            loader: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

五、轉義ES6/ES7/JSX

　　npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D

//建立 .babelrc 文件
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

module: {
    rules:[ 
        {
            test:/\.jsx?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
                }
            },
            include:path.join(__dirname,'./src'),
            exclude:/node_modules/
        }
    ]
}

4、配置plugins

一、自動產出html

　　npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',   // 指定產出的模板
        filename: 'base.html',          // 產出的文件名
        chunks: ['common', 'base'],     // 在產出的HTML文件裏引入哪些代碼塊
        hash: true,                     // 名稱是否哈希值
        title: 'base',                  // 能夠給模板設置變量名，在html模板中調用 htmlWebpackPlugin.options.title 可使用
        minify: {                       // 對html文件進行壓縮
            removeAttributeQuotes: true // 移除雙引號
        }
    })
]

二、分離css

　　npm install extract-text-webpack-plugin@next -D

//把編譯好的代碼放到單獨的文件裏面
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin('css.css');
let lessExtract = new ExtractTextWebpackPlugin('less.css');
let sassExtract = new ExtractTextWebpackPlugin('sass.css');

module: {
    rules: [
         {
            test: /\.css$/,
            loader: cssExtract.extract({
                use: ['css-loader?minimize']
            })
        }, {
            test: /\.less$/,
            loader: lessExtract.extract({
                use: ['css-loader?minimize', 'less-loader']
            })
        }, {
            test: /\.scss$/,
            loader: sassExtract.extract({
                use: ['css-loader?minimize', 'sass-loader']
            })
        }
    ]
},
plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

//處理圖片路徑問題
const PUBLIC_PATH='/';
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:PUBLIC_PATH
}

三、拷貝靜態文件（有時項目中沒有引用的文件也須要打包到目標目錄）

　　npm install copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins: [
    new CopyWebpackPlugin([{
        from: path.join(__dirname, 'public'),       // 從哪裏複製
        to: path.join(__dirname, 'dist', 'public')  // 複製到哪裏
    }])
]

四、打包前先清空輸出目錄

　　npm install clean-webpack-plugin -D

const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')])
]

五、壓縮JS

　　npm install uglifyjs-webpack-plugin -D

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

plugins: [
    new UglifyjsWebpackPlugin()
]

5、服務器代理

//請求到 /api/users 如今會被代理到請求 http://localhost:9000/api/users。
devServer: {
    proxy: {
        "/api": "http://localhost:9000",
    }
}

//去掉請求路徑中'/api'
devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:4000',
            pathRewrite: {
                '/api': ''
            }
        }
    }
}

6、relove解析

一、extensions

//指定extension以後能夠不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配
resolve: {
    //自動補全後綴，注意第一個必須是空字符串,後綴必定以點開頭
   extensions: ["",".js",".css",".json"],
},

二、 alias

//配置別名能夠加快webpack查找模塊的速度
//每當引入jquery模塊的時候，它會直接引入jqueryPath,而不須要從node_modules文件夾中按模塊的查找規則查找
//不須要webpack去解析jquery.js文件
const bootstrap = path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css');
resolve: {
    alias: {
        'bootstrap': bootstrap
    }
}

7、多入口文件

//有時候咱們的頁面能夠不止一個HTML頁面，會有多個頁面，因此就須要多入口
// 多個入口，能夠給每一個入口添加html模板
entry: {
    index: './src/index.js',
    main:'./src/main.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
    publicPath:PUBLIC_PATH
},

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: './src/index.html',
        chunks:['index'],
        filename:'index.html'
    }),
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        chunks:['login'],
        template: './src/login.html',
        filename:'login.html'
    })]
]