webpack4配置學習(一)

時間 2020-04-22

標籤 webpack4 webpack 配置學習简体版

原文原文鏈接

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。css

1.安裝webpackhtml

　　1.1須要先在項目中npm init初始化一下，生成package.jsonnode

1.2 npm install webpack webpack-cli -D

2.webpack配置webpack

在根目錄建立一個webpack.config.js文件，用於配置一些webpack，全部的配置項都會在webpack進行配置。並在目錄裏面建立一個src目錄。而後再src目錄建立一個index.js文件和html文件。css3

在index.html文件中寫入一個div標籤web

<!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配置目錄npm

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

配置多文件打包,若是是兩個js文件json

entry: { main: './src/index.js', //入口文件
        sub: './src/index.js' },

這時候須要在output中的filename中配置瀏覽器

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

2.1webpack配置圖片sass

在個人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配置插件特別多，須要慢慢的來，理解經常使用的場景配置就能夠了。剩下的須要單獨查閱資料就能夠了解其中配置以及原理

原文出處：https://www.cnblogs.com/zhoulifeng/p/10981135.html