從零開始構建一個webpack項目

時間 2019-11-06

標籤開始構建一個 webpack 項目简体版

原文原文鏈接

一、新建項目

新建一個空文件夾，用於建立項目，使用 npm init 命令建立一個 package.json 文件。
輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，也可使用 npm init -y 這個命令來一次生成 package.json 文件，這樣終端不會詢問你問題。javascript

二、安裝 webpack

安裝 webapck 時把 webpack-cli 也裝上是由於在 webpack4.x 版本後 webpack 模塊把一些功能分到了 webpack-cli 模塊，因此二者都須要安裝，安裝方法以下：css

npm install webpack webpack-cli --global    //這是安裝全局webpack及webpack-cli模塊
npm install webpack webpack-cli --save-dev  //這是安裝本地項目模塊
複製代碼

三、新建文件目錄

在根目錄件夾中新建兩個文件夾，分別爲 src 文件夾和 dist 文件夾，接下來再建立三個文件:此時，項目結構以下html

index.html --放在 dist 文件夾中；
hello.js --放在 src 文件夾中；
index.js --放在 src 文件夾中；

3.一、 index.html 中寫下 html 代碼，它的做用是爲了引入咱們打包後的 js 文件：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Webpack Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
    <!--這是打包以後的js文件，咱們暫時命名爲bundle.js-->
  </body>
</html>
複製代碼

3.二、在 hello.js 中導出一個模塊：

// hello.js
module.exports = function() {
  let hello = document.createElement('div')
  hello.innerHTML = 'welcome to China!'
  return hello
}
複製代碼

3.三、在 index.js 中引入這個模塊（hello.js）:

//index.js
const hello = require('./hello.js')
document.querySelector('#root').appendChild(hello())
複製代碼

上述操做就至關於咱們把 hello.js 模塊合併到了 index.js 模塊，以後咱們打包時就只需把 index.js 模塊打包成 bundle.js 便可。vue

3.四、進行最簡單的 webpack 打包

// 在終端中使用以下命令進行打包：
webpack src/index.js --output dist/bundle.js
複製代碼

上述就至關於把 src 文件夾下的 index.js 文件打包到 dist 文件下的 bundle.js，這時就生成了 bundle.js 供 index.html 文件引用。如今打開 index.html 就能夠看到咱們的頁面了。java

四、配置 webpack.config.js

上述打包方式太 low 了，咱們能夠在當前項目的根目錄下新建一個配置文件 webpack.config.js 用來配置打包方式。 webpack.config.js 配置以下node

const path = require('path') // 處理絕對路徑
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  }
}
複製代碼

有了這個配置文件，咱們只需在終端中運行 webpack 命令就可進行打包，這條命令會自動引用 webpack.config.js 文件中的配置選項。react

五、構建本地服務器

如今咱們是經過打開本地文件來查看頁面的，感受仍是有點 low。例如 vue, react 等腳手架都是在本地服務器運行的。因此咱們再作進一步優化。webpack

5.1 webpack-dev-server 配置本地服務器

Webpack 提供了一個可選的本地開發服務器，這個本地服務器基於 node.js 構建，它是一個單獨的組件，在 webpack 中進行配置以前須要單獨安裝它做爲項目依賴：npm i webpack-dev-server -Dweb

如下是devServer 的一些配置選項:正則表達式

contentBase ：設置服務器所讀取文件的目錄，當前咱們設置爲"./dist"
port ：設置端口號，若是省略，默認爲 8080
inline ：設置爲 true，當源文件改變時會自動刷新頁面
historyApiFallback ：設置爲 true，全部的跳轉將指向 index.html

如今咱們把這些配置加到 webpack.config.js 文件上，以下：

// webpack.config.js
const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服務器所加載文件的目錄
    port: '8088', // 設置端口號爲8088
    inline: true, // 文件修改後實時刷新
    historyApiFallback: true //不跳轉
  }
}
複製代碼

5.二、package.json 文件中添加啓動和打包命令

package.json 文件修改以下

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}
複製代碼

這樣咱們就能夠用如下命令進行本地運行或者打包文件了

npm run dev 啓動本地服務器，webpack-dev-server 就是啓動服務器的命令，--open 是用於啓動完服務器後自動打開瀏覽器。
npm run build 執行打包命令

此時，咱們只要輸入 npm run dev 就能夠在http://localhost:8088/中查看頁面了。

六、配置經常使用 loader

loader 可讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

Loaders 的配置包括如下幾方面：

test：一個用以匹配 loaders 所處理文件的拓展名的正則表達式（必須）
loader：loader 的名稱（必須）
include/exclude：手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
options：爲 loaders 提供額外的設置選項（可選）

配置 css-loader 和 sass-loader

若是咱們要加載一個 css 文件，須要安裝配置 style-loader 和 css-loader。
若是咱們要使用 sass，就要配置 sass-loader 和 node-sass。

css-loader：加載.css 文件
style-loader：使用 style 標籤將 css-loader 內部樣式注入到咱們的 HTML 頁面

const path = require('path')
module.exports = {
  entry: path.join(__dirname, '/src/index.js'), // 入口文件
  output: {
    path: path.join(__dirname, '/dist'), //打包後的文件存放的地方
    filename: 'bundle.js' //打包後輸出文件的文件名
  },
  devServer: {
    contentBase: './dist', // 本地服務器所加載文件的目錄
    port: '8088', // 設置端口號爲8088
    inline: true, // 文件修改後實時刷新
    historyApiFallback: true //不跳轉
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的文件
        use: ['style-loader', 'css-loader']
      {
        test: /\.(scss|sass)$/, // 正則匹配以.scss和.sass結尾的文件
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}
複製代碼

配置 Babel-loader

Babel 實際上是一個編譯 JavaScript 的平臺，它能夠編譯代碼幫你達到如下目的：

讓你能使用最新的 JavaScript 代碼（ES6，ES7...）；
讓你能使用基於 JavaScript 進行了拓展的語言，好比 React 的 JSX；

module: {
  ...
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src')]
    }
  ]
}
複製代碼

處理圖片

處理圖片資源時，咱們經常使用的兩種 loader 是 file-loader 或者 url-loader。當使用 url-loader 加載圖片，圖片小於上限值，則將圖片轉 base64 字符串，不然使用 file-loader 加載圖片。

module: {
  ...
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}
複製代碼

七、配置經常使用插件

loader 被用於轉換某些類型的模塊，而插件則能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮，一直到從新定義環境中的變量。插件接口功能極其強大，能夠用來處理各類各樣的任務。

7.一、自動生成 html 文件(HtmlWebpackPlugin)

如今咱們都是使用一開始建好的 index.html 文件，而後手動引入 bundle.js，若是之後咱們引入不止一個 js 文件，那就得更改 index.html 中的 js 文件名，因此能不能自動生成 index.html 且自動引用打包後的 js 呢？
HtmlWebpackPlugin 插件就是用來解決這個問題的：

安裝插件 npm i html-webpack-plugin -D
把 dist 文件夾清空
在根目錄新建 index.html,內容和原來的 html 一致，只是不引入 js 文件。
webpack.config.js 中咱們引入了 HtmlWebpackPlugin 插件

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  })
]
複製代碼

此時咱們使用 npm run build 進行打包，你會發現，dist 文件夾和 html 文件都會自動生成。

7.二、清理/dist 文件夾(CleanWebpackPlugin)

在每次構建前清理/dist 文件夾，生產最新的打包文件，這時候就用到 CleanWebpackPlugin 插件了。

安裝 npm i clean-webpack-plugin -D
配置 webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
]
複製代碼

7.三、熱更新(HotModuleReplacementPlugin)

咱們要在修改代碼後自動更新頁面，這就須要 HotModuleReplacementPlugin（HMR）插件

devServer 配置項中添加 hot: true 參數。
由於 HotModuleReplacementPlugin 是 webpack 模塊自帶的，因此引入 webpack 後，在 plugins 配置項中直接使用便可。

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    }
  }),
  new CleanWebpackPlugin(['dist'])
  new webpack.HotModuleReplacementPlugin()
]
複製代碼

7.四、增長 css 前綴

平時咱們寫 css 時，一些屬性須要手動加上前綴，好比-webkit-border-radius: 10px;，在 webpack 中咱們可讓他自動加上

安裝 npm i postcss-loader autoprefixer -D
在項目根目錄下新建 postcss.config.js 文件

module.exports = {
  plugins: [
    require('autoprefixer') // 引用autoprefixer模塊
  ]
}
module.exports = {
   ...
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的文件
        use: [
          { loader: 'style-loader' }, // 這裏採用的是對象配置loader的寫法
          { loader: 'css-loader' },
          { loader: 'postcss-loader' } // 使用postcss-loader
        ]
      }
       ...
    ]
  }
   ...
}
複製代碼

7.五、css 分離 ExtractTextPlugin

將 css 成生文件，而非內聯。該插件的主要是爲了抽離 css 樣式,防止將樣式打包在 js 中引發頁面樣式加載錯亂的現象。

安裝 npm i extract-text-webpack-plugin@next -D
在 webpack.common.js 文件中引入並使用該插件：

const ExtractTextPlugin = require('extract-text-webpack-plugin') //引入分離插件
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 正則匹配以.css結尾的文件
        use: ExtractTextPlugin.extract({
          // 至關於回滾，經postcss-loader和css-loader處理過的css最終再通過style-loader處理
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('css/index.css') // 將css分離到/dist文件夾下的css文件夾中的index.css
  ]
}
複製代碼

此時運行 npm run build 後會發現/dist 文件夾內多出了/css 文件夾及 index.css 文件。

7.六、消除冗餘 css

有時候咱們 css 寫得多了，可能會不自覺的寫重複了一些樣式，這就形成了多餘的代碼，如下方法能夠優化

安裝 npm i purifycss-webpack purify-css glob -D
引入 clean-webpack-plugin 及 glob 插件並使用

const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模塊,用於掃描所有html文件中所引用的css

plugins: [
  new PurifyCssWebpack({
    paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步掃描全部html文件中所引用的css
  })
]
複製代碼