🔨🔨 從零開始，手把手帶你搭建一套webpack模板

時間  2021-08-12
標籤 javascript css html 前端 vue java node webpack git github 欄目 JavaScript 简体版
原文   原文鏈接

這是我參與更文挑戰的第6天，活動詳情查看： 更文挑戰javascript

前言

最近在看vue源碼解析的教程視頻，每一章講解都使用到了webpack，咱們就要從零開始搭建腳手架，這樣子太費時間了，本文將簡述如何去搭建一個webpack模板，也是方便咱們後續開發或者練習時使用。（便是即拉即用，無需每次使用都去配置一遍）。css

什麼是webpack

webpack是目前前端開發中最火的模塊打包工具，只須要經過簡單的配置，即可以完成模塊的加載和打包。html

咱們就能夠從官網中的主圖看出webpack它能夠將多種文件打包合併成一個或多個bundle。前端

index.png

初始化項目

npm init -y 	// 初始化項目
git init    	// 初始化git倉庫
tsc --init  	// 生成 tsconfig.json 配置文件
複製代碼

在項目中安裝webpack及webpack-cli （本地安裝）。vue

若是使用全局安裝，這會將你項目中的 webpack 鎖定到指定版本，而且在使用不一樣的 webpack 版本的項目中， 可能會致使構建失敗。java

npm install webpack webpack-cli --save-dev
複製代碼

1.png

配置NPM腳本

在項目的package.json文件中的scripts對象中添加一句"build": "webpack"，稍後咱們可使用npm run build來把項目跑起來。node

"scripts": {
    "build": "webpack"
  },
複製代碼

項目目錄結構

咱們在根目錄下建立一個src，做爲項目的根目錄。webpack

webpack-template      
├─ src      
├─ package-lock.json  
├─ tsconfig.json
└─ package.json       
複製代碼

以後，咱們在src目錄中新建一個pages文件夾用來放置項目頁面的文件夾，在pages文件夾中建立index文件夾及html，scss，ts文件，在src目錄下建立一個main.ts，並在main.ts中寫入。git

// main.ts
console.log('main.ts')
複製代碼
// 在index.ts中引入index.scss
import './index.scss'
複製代碼
webpack-template        
├─ src                  
│  ├─ pages             
│  │  └─ index          
│  │     ├─ index.html  
│  │     ├─ index.scss  
│  │     └─ index.ts    
│  └─ main.ts           
├─ package-lock.json    
├─ package.json    
└─ tsconfig.json    
複製代碼

建立項目配置文件

在根目錄下建立一個webpack.config.ts文件，webpack會根據該配置文件定義的屬性進行處理。github

webpack-template      
├─ src                
│  ├─ pages             
│  │  └─ index          
│  │     ├─ index.html  
│  │     ├─ index.scss  
│  │     └─ index.ts    
│  └─ main.ts          
├─ package-lock.json  
├─ package.json       
├─ tsconfig.json      
└─ webpack.config.ts  
複製代碼
編寫config文件
// webpack.config.ts
import * as path from 'path';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    clean: true,
  },
};

export default config;
複製代碼

在項目中執行安裝命令，安裝所須要用到的loader。

npm install --save-dev css-loader style-loader sass-loader sass ts-loader typescript ts-node @types/node @types/webpack html-webpack-plugin
複製代碼

在webpack.config.ts中配置安裝好的loader和plugins。

配置loader

loader的一些相關配置。

module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 將 JS 字符串生成爲 style 節點
                    'style-loader',
                    // 將 CSS 轉化成 CommonJS 模塊
                    'css-loader',
                    // 將 Sass 編譯成 CSS
                    'sass-loader',
                ],
            },

            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    }
複製代碼
配置plugins

plugins的一些相關配置。

plugins: [
		new HtmlWebpackPlugin({
            title: 'index',
            template: './src/pages/index/index.html',
            filename: 'index.html',
          }),
    ]
複製代碼

安裝後，執行npm run script，把項目打包起來，獲得dist文件夾，裏邊便是咱們項目中src文件夾打包好的文件。

能夠看到裏邊有index.html和main.js文件，因爲咱們寫的是ts文件，沒法直接在瀏覽器中跑起來，上面咱們配置了ts-loader，是它幫咱們把ts轉換爲js文件的。

3.png

配置多頁面

爲何這裏要配置多頁面？

images.jpg

如今Vue，React，Angular這三大框架都是SPA了，開局直接npm run serve

但在不少場景下，SPA開發模式可能不太適用，好比咱們學校有時候舉辦活動頁面，或者平時寫一些簡單的頁面，這個時候其實多頁面更合適些。

由於不少時候這些頁面都是徹底不相關的，它們之間無需共享數據，你甚至能夠對每一個單獨的頁面使用不一樣的技術棧，例如頁面A使用Vue，頁面B使用React，頁面C使用Angular，能夠單獨對頁面設定框架的引入。

接下來，咱們將把咱們的webpack-template進行多頁面的配置。

將項目中的src / pages文件夾中新建hello文件夾，和index同樣放html，scss，ts文件，這是第二個頁面。

src                  
├─ pages             
│  ├─ hello          
│  │  ├─ hello.html  
│  │  ├─ hello.scss  
│  │  └─ hello.ts    
│  └─ index          
│     ├─ index.html  
│     ├─ index.scss  
│     └─ index.ts    
└─ main.ts           
複製代碼
// hello.html
...
<body>
    <h2>
        hello.html
    </h2>
</body>
...
複製代碼
// hello.ts
import './hello.scss'
console.log('hello.ts');
複製代碼

在webpack.config.ts配置文件中把entry和output屬性修改爲：

entry: {
        main:'./src/main.ts',
        'index': './src/pages/index/index.ts', // index頁面
        'hello': './src/pages/hello/hello.ts', // hello頁面
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]/[name].js',
        clean: true,
    }
複製代碼

由於多個頁面對應的頁面內容也是不一樣的，咱們須要在plugins數組上配置多個HtmlWebpackPlugin。

屬性 說明
title 頁面標題，即document.title
filename 導出頁面文件的名稱
template 頁面的模板，指向pages下對應頁面的html文件
chunks 注入的腳本文件（ 必定要配置這個！！不然所有腳本文件會被注入到當前頁面中 ）

關於HtmlWebpackPlugin插件的更多配置請閱讀： github.com/jantimon/ht…

plugins: [
        new HtmlWebpackPlugin({
            title: 'index',
            filename: 'index.html',
            template: './src/pages/index/index.html',
            chunks: ['index','main']
        }),
        new HtmlWebpackPlugin({
            title: 'hello',
            filename: 'hello.html',
            template: './src/pages/hello/hello.html',
            chunks: ['hello','main']
        }),
    ],
複製代碼

如今咱們再執行一下npm run build命令，打包咱們的項目。

4.png

打開hello.html和hello.html，咱們在pages文件夾中對應的頁面文件也都被HtmlWebpackPlugin插件處理到對應的html文件中。

5.png

配置代碼規範

具有基本工程素養的同窗都會注重編碼規範，而代碼風格檢查（Code Linting，簡稱 Lint）是保障代碼規範一致性的重要手段，

EditorConfig

EditorConfig是用來配置格式化代碼的，這個格式化代碼必定要和ESlint中的配置相符，不然會出現格式化後的代碼不符合ESlint中的規則，從而不能正常的打包項目。

在項目根目錄添加.editorconfig文件，.editorconfig文件是定義一些格式化規則，目錄樹結構這裏就不放啦，太長啦！

# Editor configuration, see http://editorconfig.org

# 表示是最頂層的 EditorConfig 配置文件
root = true

[*] # 表示全部文件適用
charset = utf-8 # 設置文件字符集爲 utf-8
indent_style = space # 縮進風格（tab | space）
indent_size = 2 # 縮進大小
end_of_line = lf # 控制換行類型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始終在文件末尾插入一個新行

[*.md] # 表示僅 md 文件適用如下規則
max_line_length = off
trim_trailing_whitespace = false
複製代碼

提示：若是你是使用vscode編輯器，須要到插件市場中安裝 EditorConfig for VS Code 插件。

6.png

ESlint

ESlint是一款開源的代碼檢查工具，找有問題的模式或者代碼，而且不依賴於具體的編碼風格。對大多數編程語言來講都會有代碼檢查，通常來講編譯程序會內置檢查工具。

團隊開發中，團隊成員之間的編碼風格和習慣是不一樣的，咱們可使用ESlint來解決這個問題，當代碼風格不符合ESlint規則時，就會給出代碼規則提示並自動修復。讓項目的編碼風格統一。

安裝ESlint

npm install eslint-webpack-plugin eslint --save-dev
複製代碼

配置ESlint

在項目根目錄中打開終端，執行npm eslint --init，而後根據終端操做提示完成一系列設置來生成配置文件

詢問你想使用ESlint檢測哪些問題？

7.png

咱們這裏選擇語法，發現問題，強制編碼規範

詢問你的項目使用哪一種類型的模塊

8.png

詢問你的項目是否使用瞭如下框架？

咱們這裏選擇 沒有

9.png

詢問你的項目是否使用了typescript？

10.png

咱們這裏選擇 YES

詢問你的代碼是在哪一個環境下運行的?

11.png

咱們這裏選擇瀏覽器browser

詢問你這麼定義項目的哪一種代碼風格?

12.png

咱們這裏選擇主流的樣式風格

你想遵循哪種風格？

13.png

咱們這裏選擇Airbnb風格

選擇eslint配置文件的格式

14.png

咱們這裏選擇 JS文件做爲它的配置文件格式

你如今想使用npm安裝它們嗎？

15.png

咱們這裏選擇YES，它們將開始爲咱們安裝這些依賴

這時候，項目根目錄下自動生成了.eslintrc.js 配置文件：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
  },
};
複製代碼

在webpack.config.ts中配置ESlint插件，plugins屬性中添加ESLintPlugin

import ESLintPlugin from 'eslint-webpack-plugin';
// plugins
new ESLintPlugin({
      extensions: ['js', 'ts'],
      exclude: '/node_modules/',
    }),
複製代碼

提示：若是你是使用vscode編輯器，須要到插件市場中安裝 ESLint 插件並開啓ESlint服務。

16.png

測試下是否配置成功，能夠在一個ts文件中，聲明一個變量，不要添加分號，這個時候編輯器會顯示紅色波浪線來提示你。

17.png

打開在vscode編輯器的settings.json配置文件，添加如下代碼：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }
複製代碼

當咱們配置ESlint以後，會彈出不少紅色的波浪線，這個時候若是按上面的方法一個個去點擊修復的話效率很慢，那有沒有什麼快捷的方法來解決這個問題呢？

sure ！！

eslint提供了--fix 選項，Automatically fix problems（自動修復問題），因此咱們在package.json中添加一個快捷腳本，自動修復src文件夾下的後綴名爲js和ts的文件，--ext選項，是指定修復的目錄。

"lint": "eslint --fix --ext .js,.ts src"
複製代碼

執行npm run lint，修復當前項目中全部的問題。

husky

husky 是一個 Git Hook 工具。主要實現提交前 eslint 校驗和 commit 信息的規範校驗。咱們項目已經具備了編碼規範檢測，但某些時候，有可能遺漏了一兩個規範警告提示，甚至是視而不見！關閉檢測工具按照本身原來的編碼規範來書寫代碼。爲了解決這個問題，咱們須要限制「有問題」的代碼的提交，來保證GIT倉庫中的代碼全都是符合ESlint規範的，這個時候咱們須要用到husky了。

執行husky-init 命令快速在項目初始化一個 husky 配置。

npx husky-init && npm install
複製代碼

執行完成以後，它就配置完畢了，對的 就是這麼簡單。

不過，仍是須要手動修改下文件的，打開.husky\pre-commit文件，把npm test命令替換成eslint --fix --ext .js,.ts src。

18.png

這個pre-commit是一個hook文件，做用是當咱們執行git commit的時候，會先對項目執行一遍eslint --fix --ext .js,.ts src，若是ESlint經過，即commit成功，不然中止commit。

lint-staged

lint-staged 是一個在git暫存文件上運行linters的工具，當咱們運行eslint或stylelint的命令時，只會檢查咱們經過git add添加到暫存區的文件，能夠避免咱們每次檢查都把整個項目的代碼都檢查一遍。

安裝 lint-staged

npm i lint-staged -D
複製代碼

在package.json中添加lint-staged配置項。

"lint-staged": {
    "*.{js,ts}": "eslint --fix"
  },
複製代碼

這行命令表示：只對 git 暫存區的.js、.ts 文件執行 eslint --fix

修改.husky / pre-commit文件，把eslint --fix --ext .js,.ts src命令替換成npx lint-staged

npx lint-staged
複製代碼

19.png

最後

本文從初始化項目開始到項目結構搭建，多頁面的配置再到代碼提交規範這些平時經常使用到的一些配置選項都集成到了webpack-template中,手把手地帶領你們將一個空的文件夾構建一個前端開發項目模板，目的也是方便咱們平時使用webpack環境時，減小繁瑣的配置從而節約時間。

webpack-template GIT地址：github.com/QC2168/webp…

後面可能還會再配置一些技術棧，關注我 不迷路哦！😉😉

碼字不易，點個👍吧

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