webpack4配置學習(一)

小周sri的碼農發表於2019-06-05
Web

webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

1.安裝webpack

　　1.1需要先在專案中npm init初始化一下，生成package.json

1.2 npm install webpack webpack-cli -D

2.webpack配置

在根目錄建立一個webpack.config.js檔案，用於配置一些webpack，所有的配置項都會在webpack進行配置。並在目錄裡面建立一個src目錄。然後再src目錄建立一個index.js檔案和html檔案。

   

在index.html檔案中寫入一個div標籤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack配置學習</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

 

webpack配置目錄

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js' //入口檔案
    output: {
        //出口
        path: path.resolve(__dirname, 'dist'), //打包生成的目錄
        filename: 'index.js'  //生成目錄的檔名字,單個js檔案使用  
    } 
}

配置多檔案打包,如果是兩個js檔案

entry: {
        main: './src/index.js', //入口檔案
        sub: './src/index.js'
    },

這時候需要在output中的filename中配置

filename: '[name].js' //打包生成目錄多個js檔案的時候

2.1webpack配置圖片

在我的src目錄中準備一張圖片，在index.js中寫入

import avatar from './item.png'

var img = new Image()

img.src = avatar

var root = document.getElementById('root')

root.append(img)

配置webpack模組化(module),首先先安裝,選擇使用yarn的方式安裝

yarn add  url-loader --save-dev
module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: '[name]_[hash].[ext]', //圖片名字加上hash值
                        outputPath: 'images/', //打包之後圖片存放的一個目錄裡面
                        limit: 10240
                            //limit圖片大小設定，如果超過10240位元組，打包會生成目錄和圖片，如果沒有超過設定的大小，會預設打包壓縮在js中的base64
                    }
                }
            }
        ]
    },

在package.json檔案配置，每次執行 npm run dev就會打包，會在你的根目錄生成dist目錄

"scripts": {
        "dev": "webpack"
    },

 

2.2webapck對css(scss)前處理器處理

首先需要安裝下面這些外掛

yarn add  css-loader --save-dev
yarn add node-sass --save-dev
yarn add sass-loader --save-dev
yarn add scss-loader --save-dev
yarn add style-loader --save-dev

在webapck中寫入

module: {
        rules: [
            {
                test: /\.scss$/,
                // css-loader處理css檔案 style-loader把css-loader處理好的檔案掛載到header標籤上，sass-loader對scss前處理器配置,postcss-loader處理css字首
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
　　　　　　　　　　　　　　　　modules: true, //模組化打包，
　　　　　　　　　　　　　　　 importLoaders: 2 //每次載入都會執行sass-loader和postcss-loader  
　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}, 
　　　　　　　　　　　　'sass-loader', 
　　　　　　　　　　　　'postcss-loader'  瀏覽器字首
　　　　　　　　　　] 
　　　　　　　　} 
　　　　　　] 
　　　　},

如果想對css進行模組化處理，需要配置

options: {
　modules: true, //模組化打包，
　importLoaders: 2 //每次載入都會執行sass-loader和postcss-loader  
}

在目錄中建立一個scss檔案，寫入一些簡單的css檔案

body {
    .avatar {
        width: 50%;
        border: 1px solid red;
        transform: translate(100px, 100px);
    }
}

　在index.js檔案中寫入

import avatar from './item.png'
import createdAvatar from './createdAvatar.js'  引入js檔案


import style from './index.scss'
var img = new Image()

img.src = avatar

img.classList.add(style.avatar)

var root = document.getElementById('root')

root.append(img)
createdAvatar() //使用
 

在建立一個js檔案，然後再index.js檔案中引入，

import avatar from './item.png'

function createdAvatar() {
    var img = new Image()
    img.src = avatar;
    img.classList.add('avatar')
    var root = document.getElementById('root');
    root.append(img)
}

export default createdAvatar;

　　打包之後可以在瀏覽器看到，有樣式，一個沒有

在上面的css中，我們使用了css3，但是瀏覽器並沒有自動給我加上字首，這時候，需要我們手動配置一些。

安裝
yarn add postcss-loader --save-dev

需要在你的根目錄建立一個postcss.config.js檔案，

安裝
yarn add autoprefixer --save-dev

使用，

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

// 用與處理css在不同瀏覽器自動加上字首問題

　　然後再你的css配置中使用 postcss-loader，執行打包，再次在瀏覽器可以看到，對於一些css3瀏覽器自動加上字首

 

2.3webpack對字型進行處理

先行iconfont下載一些字型，放入自己的src目錄裡面，需要在index.js檔案引入並使用

import './iconfont.scss'

var root = document.getElementById('root')
root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"

然後需要在webpack進行一些配置，首先安裝一個外掛

yarn add file-loader --save-dev

使用

module: {
        rules: [{
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },

再次執行npm run dev打包之後，可以在瀏覽器看到我們的字型圖示了

 

2.4webpack配置html打包檔案處理

如果想每次打包之後，dist目錄都會給我們生成一個html檔案，這時候需要安裝一個外掛

yarn  add html-webpack-plugin --save-dev

然後在webapck.config.js檔案中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

　使用 HtmlWebpackPlugin打包之後自動生成html檔案，

plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],

　　

每次打包需要重新更新一下dist目錄，刪除裡面的檔案，重新生成一個新的，這時候需要安裝另一個外掛

yarn  add  clean-webpack-plugin --save-dev

　也是需要在webpack.config.js引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

　　使用和HtmlWebpackPlugin一樣

plugins: [
        // HtmlWebpackPlugin打包之後自動生成html檔案，
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // CleanWebpackPlugin打包之前先自動清除dist目錄裡面所有的檔案，
        new CleanWebpackPlugin()
    ],

　　

2.5SourceMap配置，用於檢測在程式碼打包之後，檢測問題，定位到那個行

module.exports = {
    devtool: 'cheap-inline-source-map',
}

　　配置選項如下

　　//source-map 打包之後會生成map檔案，效能比較慢，用於檢測程式碼打包之後錯誤資訊提示

    //eval 打包最快，不會生成.map檔案，

    //inline-source-map 打包不會生成.map檔案，在打包的js檔案生成base64

    //如果是在development 開發環境  使用cheak-module-eval-source-map,不會生成.map檔案，但是整合在打包之後main.js中eval中

    //cheap-inline-source-map 打包不會生成.map檔案，在打包的js檔案生成base64

    //如果是在production 線上環境 使用cheak-module-source-map,會打包生成.map檔案

 

webpack配置外掛特別多，需要慢慢的來，理解常用的場景配置就可以了。剩下的需要單獨查閱資料就可以瞭解其中配置以及原理

相關文章