webpack4.0入個門

時間  2019-11-06
標籤 webpack4.0 webpack 简体版
原文   原文鏈接

爲何要學習webpack

webpack是如今主流的前端構建工具，主流公司的項目中幾乎都有他的存在。不少同窗接觸到現代前端可能就是學習的Vue，vue-cli腳手架會自動幫你生成一個web工程，他就是基於webpack進行構建的。可是隻會使用現成的腳手架工具是遠遠不夠的，想要更深刻的瞭解其中的運行機制還得本身從0開始搭建web工程。下面咱們開始從0搭建一個簡單的入門級demo。css

入門要點

本篇文章針對的是webpack小白，看完以後呢，你將會了解到大體的webpack運行流程啦。簡單的來講就是，就是咱們寫的文件從哪兒來到哪兒去的這麼一個流程。話很少說，開始動手吧。html

開始動手

首先建立一個文件夾webpackStudy做爲咱們的工程文件。前端

初始化

進入webpackStudy文件夾中，在命令行中使用npm init來初始化生成一個新的 package.json 文件。而後根據命令行中的提示自行設置工程名稱，版本號，項目描述等選項。而後咱們的文件夾目錄就會多出一個package.json文件，這個文件會把web工程中的一些依賴、命令、描述等集中起來，它至關於一張製造圖紙。vue

而後咱們進行webpack的安裝，webpack4.0在安裝webpack的同時還須要進行webpack-cli的安裝。運行命令npm install -D webpack webpack-cli(-D的意思是安裝本地依賴)。node

接下來，咱們須要添加如下目錄或文件。webpack

webpack-demo
|- package.json
|- src
    |- index.js
|- webpack.config.js
複製代碼
  • src目錄是開發目錄
  • index.js是入口文件，負責開發目錄與打包器的鏈接。
  • webpack.config.js是webpack的配置文件，他負責操做webpack這個打包器。

入口（entry）

entry會指示webpack應該使用哪一個模塊，來做爲起點模塊，而後在進入起點模塊之後，webpack會對起點模塊的各個依賴模塊進行加載和分析。git

webpack.config.jses6

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    }
}
複製代碼

以上就是對入口的簡單配置，在上面的entry對象中，配置的是單入口，會加載以index爲模塊名稱的模塊。path模塊是js自帶模塊，用於處理文件路徑和目錄路徑。github

出口（output）

有入口就有出口，output屬性會告訴webpack在哪裏輸出它通過處理後建立的文件，以及如何命名這些文件。在web工程中，整個應用程序結構都會被編譯到所指定的輸出路徑的文件夾中。web

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    }
}
複製代碼

上面的示例當中，咱們指定輸出路徑爲當前目錄結構下的，dist目錄，輸出的文件名爲bundle.js。

下面咱們進行簡單的測試

src/index.js

console.log("hello world");
複製代碼

package.json

略...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
複製代碼

對index.js寫入打印代碼，同時對package.json寫入script執行命令。build命令的意思是，運行npm run build時，會調用webpack處理webpack.config.js(默認處理文件)文件。

運行npm run build，此時的目錄結構變成

webpack-demo
|- dist
    |-bundle.js
|- package.json
|- src
    |- index.js
|- webpack.config.js
複製代碼

運行node dist/bundle，控制檯輸出hello world。

運行時的警告
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to
'development' or 'production' to enable defaults for each environment.
是由於沒有選擇模式形成的，忽略便可。
複製代碼

裝載（loader）

webpack自身只能理解JavaScript文件，可是項目中確定會有其餘的文件，最經常使用的確定是圖片文件和css文件，webpack須要依靠各種loader去處理非Javascript文件，將他們轉換成webpack可以有效進行處理的模塊，而後webpack會對他們進行打包處理而後輸出。下面來進行css文件和圖片文件的處理。首先安裝依賴npm install -D style-loader css-loader url-loader。

const path = require("path");

module.exports = {
略···
    module: {
        rules: [
            {
                test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]    
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192, //文件大小限制
                        name: 'images/[name].[ext]?[hash]'
                    }
                }    
            }
        ]
    }
}
複製代碼
  • test選項用於標識出應該被對應的loader進行轉換的某種文件。
  • use選項表示轉換時對應的loder。use對應的數組的處理順序是從後往前。
  • options能夠進行一些選項的配置，圖片處理中limit選項是限制文件的大小，而name選項中的name是對應的文件名，ext則是文件的後綴，hash則是該文件的hash碼。

測試

向src目錄中添加圖片，以及新建一個style.css文件。向dist目錄添加一個index.html文件,來展現打包後的內容。

webpack-demo
|- dist
    |-index.html
    |-bundle.js
|- package.json
|- src
    |- index.js
    |- img.png
    | -style.css
|- webpack.config.js
複製代碼

src/index.js

import "./style.css"
import imgUrl from "./img.png"

function createComponent(){
    var element = document.createElement('div');
    element.innerHTML = ['hello webpack'];
    return element;
}
function createImg(){
    var imgBox = document.createElement('img');
    imgBox.src = imgUrl;
    return imgBox;
}

document.body.append(createComponent(),createImg());
複製代碼

src/style.css

body{
    text-align: center;
    color: blueviolet;
    font-size: 40px;
    font-weight:bold;
}
複製代碼

dist/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpackStudy</title>
</head>
<body></body>
<script src="./bundle.js"></script>
</html>
複製代碼

運行npm run build後，而後打開dist裏面的index.html你將會看到你再src/index.js裏面寫的內容。

插件（plugins）

前面說到，webpack會把工程目錄下的文件處理而後打包到dist目錄中去。按理說，dist目錄中不該該由咱們建立文件的，因此這時候插件（plugins）派上用場了。

插件相對於loader來講，能夠執行更廣的任務，從打包到壓縮，到分割文件...它能夠用來處理各類各樣的任務。下面咱們將用上html-webpack-plugin插件來處理dist目錄中的html文件自動生成，並加載bundle資源問題。

首先安裝依賴npm install -D html-webpack-plugin

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    略...
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest' //設置html文件文件名稱,
        })
    ]
}
複製代碼

咱們添加了插件html-webpack-plugin,而後刪除dist文件中的html文件,而後運行npm run build命令後會發現,dist目錄中會自動建立index.html文件並加載bunlde.js,這都是插件在發揮做用。

dev-server

在實際的開發中，咱們不可能每進行一次修改後就打包一次，這樣無疑是很是低效的。因此咱們須要一個工具，能夠隨時讓咱們看到咱們寫的效果。webpack-dev-server就是這樣一個工具，下面咱們來進行安裝和使用。首先安裝依賴npm install -D webpack-dev-server

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack"，
    
},
複製代碼
  • package.json中的dev命令的意思是，運行npm run dev時，會調用webpack-dev-server工具來執行webpack.config.js(默認文件)。
  • --open選項的意思是執行該命令時自動打開瀏覽器訪問。

運行npm run dev會自動打開瀏覽器，並訪問http://localhost:8080(默認端口,如8080端口被佔用會依此類推)。

github

代碼在個人github倉庫step1分支。

END

至此，咱們就能夠算是對webpack4.0入了個門。咱們寫出了一個簡易的webpackdemo，大體瞭解了webpack進行打包處理，如何使用loader，如何使用插件，如何安裝webpack-dev-server以便於在開發中使用。固然webpack的世界遠不止於此，還有更多的內容等着咱們去了解。

想用webpack作更多事情能夠看個人另外一篇文章《webpack4.0+vue+es6配置》

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程