webpack實踐 | 8月更文挑戰

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰

安裝：css

//初始化
npm init -y //初始化npm配置⽂件
npm install --save-dev webpack //安裝核⼼庫
npm install --save-dev webpack-cli //安裝命令⾏⼯具
複製代碼

在使用過程當中npm比較慢，你們能夠把npm源設置爲淘寶鏡像源，執行命令：html

npm config set registry https://registry.npm.taobao.org
複製代碼

可是若是其餘同事沒有設置這個，或者並不知道如何設置，咱們能夠添加一個文件，自動設置node

//在根目錄建立 .npmrc ⽂件
touch .npmrc
//在該⽂件內輸⼊配置
registry=https://registry.npm.taobao.org/
複製代碼

建立src目錄和入口文件，建立webpack配置文件（默認配置）webpack

//webpack.config.js
const path = require("path");
module.exports = {
     entry: "./src/index.js",
     output: {
         path: path.resolve(__dirname, "./dist"),
         filename: "[name].js",
     },
     mode: "development",
};
複製代碼

樣式處理web

集成css樣式處理：css-loader-style-loader，並建立index.cssnpm

//安裝
npm install style-loader css-loader -D
//配置
module: {
     rules: [
         {
             test: /\.css$/,
             use: ["style-loader", "css-loader"],
         },
     ],
}
複製代碼

集成Less sass瀏覽器

//安裝
//sass
npm install node-sass sass-loader -D
//less
npm install less less-loader -D
//配置
rules:[
    {
         test: /\.scss$/,
         use: ["style-loader","css-loader","sass-loader"]
     },
     {
         test: /\.less$/,
         use: ["style-loader","css-loader","less-loader""]
     }
]
複製代碼

樣式文件分離緩存

通過前面兩個loader的處理，css最終是打包在js中的，運行時會動態插入head中可是在生產環境會把css文件分離出來，有利於客戶端緩存，並行加載及減小js包的大小，因此能夠使用mini-cssextract-plugin插件（經常使用於生產環境）sass

//安裝
npm install mini-css-extract-plugin -D
//使⽤
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
     module: {
     rules: [
        {
             test: /\.less$/,
             use: [
                 // 插件須要參與模塊解析，須在此設置此項，再也不須要style-loader
                 {
                     loader: MiniCssExtractPlugin.loader,
                     options: {
                         hmr: true, // 模塊熱替換，僅需在開發環境開啓
                         // reloadAll: true,
                         // ... 其餘配置
                     }
                 },
                 'css-loader',
                 'postcss-loader',
                 'less-loader'
             ],
         },
     ],
 },
 plugins: [
     new MiniCssExtractPlugin({
         filename: '[name].css', // 輸出⽂件的名字
         // ... 其餘配置
     }),
 ]
};
複製代碼

圖片和靜態文件markdown

使用到url-loader和file-loader，url-loader能夠限制文件大小，會返回dataUrl，不會輸除真實的文件，能夠減小請求次數。

//安裝
npm install url-loader file-loader -D
//⼊⼝⽂件
import pic from "./logo.png";
var img = new Image();
img.src = pic;
img.classList.add("logo");
var root = document.getElementById("root");
root.append(img);
//使⽤
module.exports = {
     modules: {
         rules: [
             {
                 test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
                 use: [{
                     loader: 'url-loader', // 只要配置url-loader便可，內部會⾃動調⽤file-loader
                     options: {
                         limit: 10240, //限制大小，⼩於10240的⽂件會被轉換成DataURL
                         name: '[name]_[hash:6].[ext]', // 設置輸出⽂件的名字
                         outputPath: 'assets', // 設置資源輸出的⽬錄
                     }
                 }],
                 exclude: /node_modules/
             }
         ]
     }
}
複製代碼

注：limit設置太大會致使js文件加載變慢，而且要配合加載速度和網絡請求次數。若是有圖片壓縮要求，能夠使用：image-webpack-loader

HTML頁面處理

能夠使用htmlwebpackplugin會在打包結束後，⾃動⽣成⼀個html⽂件，並把打包⽣成的js模塊引⼊到該html 中。

//安裝
npm install --save-dev html-webpack-plugin
//配置
title: ⽤來⽣成⻚⾯的標題
filename: 設置的⽂件名，默認是index.html, 也能夠直接配置帶有⼦⽬錄。
template: 模板⽂件路徑，⽀持加載器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊全部的資源到特定的template或templateContent 中，若是設置爲true或者 body，全部的js文件會被放置到 body
元素的底部，'head' 會被放置到 head 元素中。
favicon: 添加特定的 favicon 路徑到輸出的 HTML ⽂件中。
minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
hash: true | false,默認添加⼀個惟⼀的webpack編譯hash到全部包含的腳本和CSS⽂件，對於解除cache緩存頗有⽤。
cache: true | false,默認在⽂件修改以後纔會發佈⽂件。
showErrors: true | false, 若是爲 true, 這是默認值，錯誤信息會寫⼊到 HTML ⻚⾯中
chunks: 容許只添加某些塊 (⽐如，僅僅 unit test 塊)
chunksSortMode: 容許控制塊在添加到⻚⾯以前的排序⽅式，⽀持的值：'none' | 'default' |{function}-default:'auto'
複製代碼

souceMap

經過sourceMap找到源碼，在開發環境dev中默認開啓

devtool:"none" //生產環境關閉配置
複製代碼

source-map產生.map文件

devtool:"cheap-module-eval-source-map",// 開發環境配置
devtool:"cheap-module-source-map", // 線上⽣成配置，線上不推薦開啓
複製代碼

Hot Module Replacement熱模塊替換

css:不支持抽出來的css文件，須要用到style-loader，而且不⽀持contenthash，chunkhash

js:須要使⽤module.hot.accept來觀察模塊更新從⽽更新

//配置啓動
devServer: {
     contentBase: "./dist",
     open: true,
     hot:true,
     hotOnly:true //即使HMR不⽣效，瀏覽器也不⾃動刷新，就開啓hotOnly
}

const webpack = require("webpack");
//配置插件的地方添加：
plugins: [
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
         template: "src/index.html"
     }),
     new webpack.HotModuleReplacementPlugin()
]
複製代碼

上面就是經常使用的一些配置