webpack 4教程(一) 入門篇搭建基本開發環境

時間 2019-11-30

標籤 webpack 教程入門搭建基本開發環境简体版

原文原文鏈接

簡介

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。css

核心概念

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

Webpack 啓動後會從Entry裏配置的Module開始遞歸解析 Entry 依賴的全部 Module。每找到一個 Module，就會根據配置的Loader去找出對應的轉換規則，對 Module 進行轉換後，再解析出當前 Module 依賴的 Module。這些模塊會以 Entry 爲單位進行分組，一個 Entry 和其全部依賴的 Module 被分到一個組也就是一個Chunk。最後 Webpack 會把全部 Chunk 轉換成文件輸出。在整個流程中 Webpack 會在恰當的時機執行 Plugin 裏定義的邏輯。html

1、簡單的單頁面配置

webpack 是用node方式來寫他採用的方式是common.js規範支持es6

一、webpack.config.js最簡單目錄結構

module.exports = {
    mode:'development',     //開發仍是生產模式
    entry:"./src/index.js", //入口文件
    output: {   //出口
    },
    devServer: {    //開發服務
    },
    module: { //模塊的配置
    },
    plugins: [ //插件

    ]
};
複製代碼

二、output出口文件

output: {  
        //打包後的文件名
        filename:'bundle.js',
        //打包後的目錄，必須絕對路徑
        path:require('path').resolve(__dirname,'dist')
    },
複製代碼

三、plugins 插件的配置

npm i html-webpack-plugin

let htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
        new htmlWebpackPlugin({
            template:'./src/index.html', //模板文件
            filename:'index.html'       //打包後的文件名稱
        })
    ]
複製代碼

四、往src/index.js主文件添加點內容

src/index.js主文件

//主模塊 webpack默認會識別js模塊
import str from "./a";
console.log(str);
document.getElementById('app').innerHTML = 'hello world'
複製代碼

src/a.js 證實下可使用es6語法

export default 'hello'
複製代碼

src/index.html只放一個div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
複製代碼

五、測試效果

到這裏，就能夠實現打包了，但咱們須要在package.json寫兩個命令node

輸入npm run dev 查看結果webpack

六、增長css、less的支持

6.1 安裝依賴的loader

npm i style-loader css-loader less-loader -D
配置module裏面的規則

module: { //模塊的配置
        rules: [
            {
                test:/\.css/,use:['style-loader','css-loader']
            },
            {
                test:/\.less/,use:['style-loader','css-loader','less-loader']
            }
        ]
    },
複製代碼

6.2 src/index.js引入index.css和index.less文件

//主模塊 webpack默認會識別js模塊
import str from "./a";
console.log(str);
document.getElementById('app').innerHTML = 'hello world'

import "./index.css"   //引入css
import "./index.less"  //引入less

複製代碼

6.3 增長點樣式

簡單的增長兩個樣式

測試效果git

6.4 優化改進

效果實現了，可是有個問題，咱們看下渲染出來的頁面結構es6

要解決這個問題，須要引入一個插件 mini-css-extract-plugingithub

安裝插件 npm i mini-css-extract-plugin -D
修改module中的規則

module: { //模塊的配置
        rules: [
            {
                test: /\.css$/, use: [{ //指定對應的loader 
                    loader: MiniCssExtractPlugin.loader
                }, 'css-loader']
            },
            {test:/\.less$/,use:[{
                    loader: MiniCssExtractPlugin.loader
                },
                    'css-loader',
                    'less-loader']
            }
        ]
    },
複製代碼

使用mini-css-extract-plugin插件

let MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            // 指定打包後的輸出目錄
            filename: "css/index.css",
        })
    ],
複製代碼

看下效果web

2、多頁面多入口配置

咱們假定有2個頁面 index.html 、login.htmlnpm

index.html保持不變
login.html 引入一個login.js文件

2.1修改entry

entry: {
        "index":"./src/index.js",   //前面的key用於標識，後面會用到
        'login':'./src/login.js'
    },
複製代碼

2.2修改output

output: { //出口
        filename: "js/[name].js", //打包後的目錄格式  [name]對應上面定義的key
        //出口路徑是一個絕對路徑
        path: require("path").resolve(__dirname, 'dist')
    },
複製代碼

須要主要的是[name]對應entry對應的keyjson

2.3修改plugins

plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks:['index']    
        }),
        new htmlWebpackPlugin({ //增長一個htmlWebpackPlugin
            template: './src/index.html',
            filename: 'login.html',
            chunks:['login']
        }),
        new MiniCssExtractPlugin({
            filename: "css/index.css"
        })
    ]
複製代碼

chunks代碼塊，也是對應entry中的key,

2.4增長login.js

簡單的彈出一句話

alert('我是login頁面')
複製代碼

2.5測試

測試index.html頁面
測試login.html
測試下打包後的文件

目前爲止，多頁面多入口已經簡單實現，你可能會問當有不少的頁面時候怎麼辦?

能夠寫個循環，動態的生成new htmlWebpackPlugin()，根據你對應的依賴進行選擇

3、介紹幾個經常使用插件(後續更新)

3.一、clean-webpack-plugin

能夠在每次打包的時候，把dist目錄清空，而後打包最新的文件。很簡單，就不廢話了。

let cleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
        new cleanWebpackPlugin(['./dist']),
        ]
複製代碼

3.2webpack自帶的熱更新模塊

咱們能夠自定義開發服務的端口，設置熱更新

let webpack = require('webpack');
devServer: {    //開發服務
        contentBase:"./dist", //啓用靜態服務目錄
        port:3000,
        hot:true
    },

 plugins: [
        new webpack.HotModuleReplacementPlugin(),  
        ]
複製代碼

在文件監聽熱更新，以index.js爲例

//主模塊 webpack默認會識別js模塊
import str from "./a";
console.log(str);
document.getElementById('app').innerHTML = 'hello world'

import "./index.css"
import "./index.less"

//若是有熱更新 就啓動熱更新
if(module.hot){
    module.hot.accept();
}
複製代碼

webpack系列代碼倉庫戳這裏