webpack配置--基礎篇

webpack是一個模塊打包工具,可以遞歸構建一個js模塊的依賴關係,將模塊最終打包成一個或多個文件.

安裝

yarn add webpack webpack-cli
複製代碼

零配置

webpack能夠進行零配置,只是此時打包功能比較弱.執行:

npx webpack
複製代碼

進行打包. 執行npx webpack默認查找node_modules---bin文件夾--webpack.cmd--執行../webpack/bin/webpack.js

手動配置

簡單配置

let path = require('path');
module.exports = {
    mode: 'development', //模式:打包後的文件是否可見production/development
    entry: './src/index.js', // 入口,能夠是相對路徑
    output: { // 出口
        filename: 'bundle.[hash:8].js', // 打包後的文件名:+哈希(打包生成新的文件), :8指定哈希長度
        path: path.join(__dirname, 'build'), // 打包後的文件路徑:必須是絕對路徑
    }
};

複製代碼

默認配置文件名爲webapck.config.js

webpack-cli文件夾下的config-yarg.js文件指定,配置文件名爲webpack.config.js 或 webpackfile.js

修改配置文件名

• 方法一:

npx webpack --config webpack.config.name.js
複製代碼

• 方法二: 在package.json文件中配置腳本進行打包, 同時修改配置文件名

"scripts": {
    "build": "webpack --config webpack.config.my.js"
 }
 // 執行 npm run webpack進行打包
複製代碼

當僅在package.json文件中配置腳本進行打包, 在執行命令中修改配置文件名時:

"scripts": {
    "build": "webpack"
 }
// 執行npm run build --  --config webpack.config.my.js 打包,注意兩個--進行傳參
複製代碼

html文件處理

啓動靜態服務-webpack-dev-server

webpack-dev-server:啓動了一個使用express的Http服務器

// webpack.config.js文件
devServer: { // 開發服務器配置,實現靜態服務
    port: 3000, // 服務器啓動端口
    progress: true, // 打包進度條
    contentBase: path.join(__dirname, './build'), // 指定靜態服務目錄
    compress: true, // 是否壓縮
}

// package.json文件
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}
 
// 執行npm run dev運行靜態服務,經過http://localhost:3000在瀏覽器中訪問
複製代碼

html-webpack-plugin

html-webpack-plugin:將打包後的js文件放在html中,將結果放在build目錄下

// webpack.config.js文件
let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html', // html模板文件
        filename: 'index.html', // 打包後的文件名稱
        hash: true, // 添加哈希,避免緩存
        minify: { // 對html也進行壓縮
            removeAttributeQuotes: true, // 刪除雙引號
            collapseWhitespace: true, // 摺疊爲一行
        }
    }),
],
複製代碼

css文件處理

在html中不能直接引入css文件,由於上文提到html文件只是一個模板;因此,通常是在js文件中引入css文件,引入時須要經過loader進行解析

文件解析

module: {
    rules: [{ 
        // css文件
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
            options: {
                insertAt: 'top', // 將css插入到自定義css的頂部   
            },
        }, 'css-loader'], 
    }, {
        // less文件
        test: /\.less$/,
        use: [style-loader, 'css-loader', 'less-loader'],  
    }],
}
複製代碼

1. loader特色:功能專注,因此須要多個loader,loader順序: 從右向左 從上往下執行
2. css-loader:處理css文件,如解析@import語法等
3. style-loader:以style標籤形式將css代碼插入在html頁面的head標籤,默認插入在head標籤的底部;能夠經過
4. less-loader: 將less轉爲css, yarn add less less-loader

css樣式抽離:mini-css-extract-plugin

將全部的css放在head標籤中,若是內容過多,致使頁面加載阻塞,根據須要將css抽離到單獨的文件中.

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
        filename: 'main.css', // 抽離出的css文件名
    }),
],
module: {
    rules: [{
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader, // 使用此loader將抽離後的css文件路徑放在link標籤中
            'css-loader',
            'postcss-loader',
        ], 
    }, {
        test: /\.less$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'less-loader'
        ],  
    }],
},

複製代碼

css添加前綴: autoprefixer postcss-loader

// 新增postcss.config.js文件
module.exports = {
    plugins: [require('autoprefixer')],
};
// webpack.config.js
use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader', // 添加前綴
    'less-loader'
], 
複製代碼

打包css文件: optimize-css-assets-webpack-plugin

使用此插件會對css進行壓縮時,必須使用uglifyjs-webpack-plugin,不然js文件不會壓縮

let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: { // 優化項
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true,
        }),
        new OptimizeCssAssetsPlugin()
    ]
}
複製代碼

js文件處理

安裝babel-loader、@babel/core、@babel/preset-env(es6語法)、@babel/plugin-proposal-class-properties@7.5.5(es7語法)、@babel/plugin-proposal-decorators(裝飾器)、@babel/plugin-transform-runtime(修改內置方法或高級語法時使用,抽離部分公共方法)、@babel/runtime(不定)、@babel/polyfill(解析includes方法解析等es7語法) 、eslint(js語句校驗規則)

module: {
    rules: [{
        test: /\.js$/,
        use: {
            enforce: 'pre', // 強制將此loader在前執行
            loader: 'eslint-loader',
        }, 
        exclude: /node_modules/,
    }, {
        test: /\.js$/,
        use: {
            loader: 'babel-loader', // 轉化es6語法
            options: {
                presets: [
                    '@babel/preset-env',
                ],
                plugins: [ // 轉化es7語法  注意順序
                    ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                    "@babel/plugin-transform-runtime"
                ],
            },
        }, 
        exclude: /node_modules/, // 默認會查找全部文件 
        include: path.resolve(__dirname, 'src'),
    }],
},
複製代碼

eslint校驗規則: 在https://eslint.org/demo中配置須要的eslint校驗規則,而後下載配置好的文件,調價到根目錄下,文件名爲.eslintrc

將jquery注入到每一個模塊中

經過espose-loader將$暴露到window上

import $ from 'expose-loader?$!jquery';
console.log(window.$);
或者
module: {
    rules: [{
        test: require.resolve('jquery'),
        use: 'expose-loader?$',
    }]
}

複製代碼

給每一個模塊提供$

let webpack = require('webpack');
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery', // 在每一個模塊中注入$
    }),
],
複製代碼

能夠直接引入jquery cdn

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script> // 直接引入不打包
複製代碼

此時,經過import $ from 'jquery'時,須要配置externals避免jquery被從新打包.

externals: {
    jquery: '$',
}
複製代碼

圖片使用和打包

js文件中使用圖片

file-loader: 生成一張圖片到build目錄下並返回新的圖片地址

import img from './640.jpeg'; // 引入圖片,返回的結果是一個新的圖片地址
let image = new Image();
image.src = img;
document.body.appendChild(image);
// webpack.config.js
module: {
    module: {
    rules: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
                loader: 'file-loader',
        }, 
    }]
}
複製代碼

css文件中使用圖片

background: url('./huaer.jpeg');
複製代碼

能夠直接引入,css-loader會對其轉爲require方式引入

html文件中使用圖片

在html文件中直接引入圖片時,經過html-withimg-loader對圖片文件進行處理

<img src='./huaer.jpeg' /> 
// webpack.config.js
module: {
    rules: [{
        test: /\.html$/,
        use: 'html-withimg-loader',
    }]
}
複製代碼

url-loader

經過url-loader能夠將圖片轉爲base64,減小http請求次數.缺點是文件變大

module: {
    rules: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 1, // 當圖片小於n k時 用base64轉換
                outputPath: '/img/', // 輸出路徑,實現對靜態文件分類
                publicPath: 'http://guazi.com', // 當經過cdn方式引入文件時,配置引入路徑
            }
        }, 
    }]
}
複製代碼