2. 程式人生 > >webpack4：從0配置到專案搭建

webpack4：從0配置到專案搭建

阿新 • • 發佈：2018-12-05

webpack4：從0配置到專案搭建

webpack4釋出以來，我寫專案都是用腳手架，即使再簡單的專案，真的是really shame。。雖然道聽途說了很多 webpack4 的特性，卻沒有嘗試過，因為它給人的感覺就是，em...很難。但是今天我從最簡單的部分開始，一點點搭建起一個專案。

0配置，配置了什麼

讓我們從0開始，新建一個專案，在終端執行以下語句：

mkdir webpack-4-quickstart && cd webpack-4-quickstart
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev

修改程式碼 package.json 中 scripts 部分：

"scripts": {
  "build": "webpack"
}

現在，我們的 package.json 是這樣的：

{
  "name": "webpack-4-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.14.0",
    "webpack-cli": "^3.0.8"
  }
}

此時，我們執行 npm run build， 會給出以下提示/錯誤：

 

webpack4-error

 

  1. error: 沒有入口檔案
  2. warning: 建議設定 mode 選項

entry & output

為了解決第一個問題，我們嘗試新建 src/index.js:

console.log(`I'm a entry point`);

此時再次執行 npm run build，成功打包出了 dist/main.js,因此我們可以得知：

webpack4 more配置了 entry（入口） src/index.js

 和output（出口） dist/main.js

當然，如果你想覆蓋這個配置（比如修改為 ./foo/src/js/index.js），可以在 package.json 修改：

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

production & development

webpack4 之前，我們寫一個專案起碼會設定兩種型別檔案：

  • 用於開發環境的webpack.dev.conf.js，定義 webpack 啟動的伺服器等
  • 用於生產環境的webpack.prod.conf.js，定義UglifyJSPlugin或其他配置等

而 webpack4 的 mode 給出了兩種配置：development 和 production。

我們修改 package.json 中 scripts 部分：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

我們分別執行 npm run dev 和 npm run build

 

webpack4-mode

 

執行 npm run dev 打包的是未壓縮的程式碼，而 npm run build 是壓縮後的程式碼。

  • 生產模式下：啟用了 程式碼壓縮、作用域提升（scope hoisting）、 tree-shaking，使程式碼最精簡
  • 開發模式下：相較於更小體積的程式碼，提供的是打包速度上的優化

總結

webpack 4 的零配置主要應用於：

  • entry 預設設定為 ./src/index.js
  • output 預設設定為 ./dist/main.js
  • production 和 development 兩種模式

專案搭建

專案搭建，我們對webpack的訴求是：

  • js的處理：轉換 ES6 程式碼，解決瀏覽器相容問題
  • css的處理：編譯css，自動新增字首，抽取css到獨立檔案
  • html的處理：複製並壓縮html檔案
  • dist的清理：打包前清理源目錄檔案
  • assets的處理：靜態資源處理
  • server的啟用：development 模式下啟動伺服器並實時重新整理

轉換 ES6 程式碼，解決瀏覽器相容問題

用 babel 轉換 ES6 程式碼

用 babel 轉換 ES6 程式碼需要使用到 babel-loader ，我們需要安裝一系列的依賴：

    npm i babel-core babel-loader babel-preset-env --save-dev

然後在根目錄新建一個babel配置檔案 .babelrc：

    {
        "presets": [
            "env"
        ]
    }

那麼如何將配置用於webpack打包中？

  • 新建一個 webpack 的配置檔案
  • 在 npm scripts 中使用 --module-bind

  1. 使用 webpack 的配置檔案的方法：

    新建 webpack.config.js：

        module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    }

  2. 在 npm scripts 中配置的方法：

    "scripts": {
      "dev": "webpack --mode development --module-bind js=babel-loader",
      "build": "webpack --mode production --module-bind js=babel-loader"
    }

使用 babel-polyfill 解決相容性問題

然而瀏覽器依然不支援一些語法的使用，導致相容性問題，我們用 babel-polyfill 解決：

    npm i babel-polyfill babel-plugin-transform-runtime  --save-dev

.babelrc 新增配置：

{
    "presets": [
        "env"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

最後在 webpack.config.js 中將 babel-polyfill 加到你的 entry 陣列中：

const path = require('path');
module.exports = {
    entry: [
        "babel-polyfill",
        path.join(__dirname, './src/index.js')
    ],
    // ...
};

編譯css，自動新增字首，抽取css到獨立檔案

webpack 並不會主動將你的css程式碼提取到一個檔案，過去我們使用 extract-text-webpack-plugin，在webpack4中我們使用mini-css-extract-plugin來解決這個問題。

postcss-loader 用於新增瀏覽器字首，相關配置我喜歡在根目錄新建 postcss.config.js 配置

    npm i mini-css-extract-plugin css-loader --save-dev
    npm i style-loader postcss-loader  --save-dev

    // webpack.config.js
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = (env, argv) => {
      const devMode = argv.mode !== 'production'
      return {
        module: {
          rules: [
            // ...,
            {
                test: /\.css$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            ]
          },
          plugins: [
            // ...,
            new MiniCssExtractPlugin({
              filename: "[name].css",
              chunkFilename: "[id].css"
            })
          ]
      }
    }

// postcss.config.js
    module.exports = {
        plugins: {
            autoprefixer: {}
        }
    }

複製並壓縮html檔案 html-webpack-plugin

    npm i html-webpack-plugin html-loader --save-dev

    // webpack.config.js
    const HtmlWebPackPlugin = require("html-webpack-plugin");
    module.exports = {
        module: {
            rules: [
                // ...,
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            })
        ]
    };

打包前清理源目錄檔案 clean-webpack-plugin

每次打包，都會生成專案的靜態資源，隨著某些檔案的增刪，我們的 dist 目錄下可能產生一些不再使用的靜態資源，webpack並不會自動判斷哪些是需要的資源，為了不讓這些舊檔案也部署到生產環境上佔用空間，所以在 webpack 打包前最好能清理 dist 目錄。

    npm install clean-webpack-plugin --save-dev

  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    plugins: [
      new CleanWebpackPlugin(['dist']),
    ]
  };

靜態資源處理 file-loader

    npm install file-loader --save-dev

    // webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          }
        ]
      }
    }

development 模式下啟動伺服器並實時重新整理 webpack-dev-server

    npm i webpack-dev-server --save-dev

package.json

    "scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }

使用 webpack 4 建立 react 專案

現在我們模仿 create-react-app 的結構，自己搭建一個 react 專案，並且用less預編譯：

  ├── public
  │   └── index.html      # html 模板
  ├── src
  │   ├── assets          # 靜態資源
  │   │   └── logo.png
  │   ├── components      # 元件
  │   │   └── App.js
  │   ├── index.js        # 入口檔案
  │   └── styles
  │       └── index.less
  ├── .babelrc
  ├── package-lock.json
  ├── package.json
  ├── postcss.config.js
  └── webpack.config.js

在以上的基礎（專案搭建部分），再安裝react相關模組及less模組：

    npm i react react-dom --save
    npm i babel-preset-react --save-dev
    npm i less less-loader --save-dev

修改 .babelrc:

    {
      "presets": ["env", "react"]
    }

修改 webpack.config.js ：

    // webpack.config.js
    const path = require('path');
    module.exports = (env, argv) => {
        const devMode = argv.mode !== 'production'
        return {
            entry: [
                "babel-polyfill",
                path.join(__dirname, './src/index.js')
            ],
            devServer: {
                port: 3000, //埠號
            },
            module: {
                rules: [
                    // ...
                    // 處理react
                    {
                        test: /\.(js|jsx)$/,
                        exclude: /node_modules/,
                        use: {
                            loader: "babel-loader"
                        }
                    },
                    // 處理less
                    {
                        test: /\.less$/,
                        use: [
                            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                            'css-loader',
                            'postcss-loader',
                            'less-loader',
                        ]
                    }
                ]
            }
        }
    };

基本上搭建完這個專案了，如果你想看完整程式碼

使用 webpack 4 建立 vue 專案

同樣地，我們模仿 vue-cli 的結構，自己搭建一個 vue 專案，這次我們的css預編譯語言用 scss：

  ├── public
  │   └── index.html      # html 模板
  ├── src
  │   ├── assets          # 靜態資源
  │   │   └── logo.png
  │   ├── components      # 元件
  │   │   └── App.vue
  │   ├── main.js        # 入口檔案
  │   ├── main.js        # 入口檔案
  │   └── styles
  │       └── index.scss
  ├── .babelrc
  ├── package-lock.json
  ├── package.json
  ├── postcss.config.js
  └── webpack.config.js

在以上的基礎（專案搭建部分），再安裝vue相關模組及sass模組：

    npm i vue --save
    npm i vue-loader vue-template-compiler --save-dev
    npm i node-sass sass-loader --save-dev

    // webpack.config.js
    const path = require('path');
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    module.exports = (env, argv) => {
        const devMode = argv.mode !== 'production'
        return {
            entry: [
                "babel-polyfill",
                path.join(__dirname, './src/main.js')
            ],
            module: {
                rules: [
                    // ...
                    // 解析vue
                    {
                        test: /\.vue$/,
                        loader: 'vue-loader',
                        options: {
                            loaders: {}
                        }
                    },
                    // 處理scss
                    {
                        test: /\.scss$/,
                        use: [
                            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                            'css-loader',
                            'postcss-loader',
                            'sass-loader',
                        ]
                    }
                ]
            },
            plugins: [
                // ...
                new VueLoaderPlugin()
            ]
        }
    };

一個簡易的 vue-cli 也搭建完成，如果你想看完整程式碼

參考資源

相關推薦

webpack4：從0配置到專案搭建

webpack4：從0配置到專案搭建 webpack4釋出以來，我寫專案都是用腳手架，即使再簡單的專案，真的是really shame。。雖然道聽途說了很多 webpack4 的特性，卻沒有嘗試過，因為它給人的感覺就是，em...很難。但是今天我從最簡單的部分開始，一點點搭建起一個專案。 0

Webpack 4 教程：從0配置到生產模式

webpack 4 問世了！除了大幅度的效能提升，而且增加了零配置的預設設定。 目錄 webpack 4 ，零配置的模組打包工具 webpack 是一個強力和有著很多獨特功能的工具，但是他的一大痛點在於他的配置檔案 如果是大中型專案我新增配置檔案沒什麼

網站搭建：從0到1搭建網站

1 網站基本概念 網站說白了就是把一些東西放到哪裡供其他人訪問，並提供了一些可以互動的介面的地方。如果要實現這樣一個地方首先，需要一個能放東西的地方這就是伺服器。其次，我們要找到這個地方，然而有很多這樣的地方，所以我們就需要給很多這樣的地方標號，然後按照標號來

springboot2.0 快速專案搭建和專案的配置(start.spring.io)

訪問 https://start.spring.io/ 輸入專案先關資訊  通過 Search for dependencies 搜尋先關模組並新增 然後點選Generate Project 生成專案的程式碼 會生成一個壓縮吧將壓縮包進行解壓&n

springboot2.0 快速專案搭建和專案的配置(Spring Tool Suite (STS))

之前寫了一篇關於如何通過 IntellJ IDEA 快速建立spirngboot ，今天我們來介紹一下如何使用Spring Tool Suite (STS) 進行spirngboot 快速建立。關於spirngboot的介紹我們不在進行介紹。 先通過Spring Tool Suit

從0到1搭建一個專案管理平臺

用JIRA還是禪道，這有一篇對比分析的文章，本文以部署禪道開源版為例 進入禪道官網下載地址 雙擊解壓 到我們剛才解壓的路徑開啟xampp—>雙擊執行start 點選啟動按鈕，關掉“啟用Apache使用者訪問驗證選項”，並

webpack4學習（React）--重點細節整理筆記（Webpack 4 教程：從零配置到生產釋出--http://www.css88.com）

一、開始配置webpack4開發環境   cmd開啟操作介面 mkdir 檔名 && cd 檔名   ------建立專案並進入專案目錄 npm init -y   ------初始化建立package.json檔案，-y的意思是初始化時全部選擇yes，

【 專欄 】- Android開發與進階：從0到1構建Android專案

Android開發與進階：從0到1構建Android專案 介紹瞭如何使用新技術從零構建一個生產環境的Android專案，包括了架構搭建、Gradle的使用實踐、設計模式、依賴注入、資料層倉庫搭建、Data Binding實踐、後臺

從0開始手工搭建webpack專案

     webpack的工作方式是：通過一個配置檔案找到入口檔案，從這個入口檔案找到你專案依賴的所有資原始檔，使用對應的資源載入器(loaders)來處理這些資原始檔，最後打包成靜態檔案。 1，安裝webpack //全域性安裝的作用是直接在命令列中使用 npm ins

2020實戰覆盤：如何從0到1搭建資料傳輸平臺產品DTS？

微信搜尋【阿丸筆記】，關注Java/MySQL/中介軟體各系列原創實戰筆記，乾貨滿滿。 2020年下半年的主要任務，就是從0到1搭建了資料傳輸服務平臺產品。平穩上線後，基本達到預期，實現了最初的產品規劃目標。 這裡做個覆盤，記錄下從0到1的過程，包括： 產品設計 整體技術架構 核心模組的技術選型、原理與

Re：從0開始的微服務架構：（一）重識微服務架構--轉

相關 推廣 模塊劃分 ati 滿足 face jar 點擊放大 積累 原文地址：http://www.infoq.com/cn/articles/micro-service-architecture-from-zero?utm_source=infoq&utm_me

從0到1搭建基於Kafka、Flume和Hive的海量資料分析系統(一)資料收集應用

大資料時代，一大技術特徵是對海量資料採集、儲存和分析的多元件解決方案。而其中對來自於感測器、APP的SDK和各類網際網路應用的原生日誌資料的採集儲存則是基本中的基本。本系列文章將從0到1，概述一下搭建基於Kafka、Flume、Zookeeper、HDFS、Hive的海量資料分析系統的框架、核心應用和關鍵模組

ML：從0到1 機器學習演算法思路實現全部過程最強攻略

ML：從0到1 機器學習演算法思路實現全部過程最強攻略 設計思路     相關文章 ML之FE：結合Kaggle比賽的某一案例細究Feature Engineering思路框架ML之FE：Feature Engineering——資料型別之預處

Netty聊天室（2）：從0開始實戰100w級流量應用

目錄 客戶端 Client 登入和響應處理 寫在前面 客戶端的會話管理 客戶端的邏輯構成 連線伺服器與Session 的建立 Session和 channel 相互繫結 AttributeMap介面的使用 客戶端登入請求 處理登入成

CDH6從0到1搭建

本文參考： http://blog.51cto.com/pizibaidu/2174297 官方參考文件 https://www.cloudera.com/documentation/enterprise/6/6.0/topics/installation.html 一，環境準備 記

達達O2O後臺架構演進實踐：從0到4000高並發請求背後的努力

net 表數據 接下來 發布 消息 出現 重復 圖片文件 方案 1、引言 達達創立於2014年5月，業務覆蓋全國37個城市，擁有130萬註冊眾包配送員，日均配送百萬單，是全國領先的最後三公裏物流配送平臺。 達達的業務模式與滴滴以及Uber很相似，以眾包的方式利

JS教程：從0開始

一。 JS簡介 1. JavaScript概述 JavaScript 是世界上最流行的程式語言。這門語言可用於 HTML 和 web，更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。 JavaScript是一種面向物件的，動態的指令碼語言，主要被作為客戶端指令碼語言在使用者的瀏

Flutter入門實戰：從0到1仿寫web版掘金App

2018曾埋下一粒種子，今年一定要寫一本小冊。。。 前言 立貼的方向曾今是分析react原始碼並實現react mini...的確亞歷山大，後因團隊技術方向探索以及業務壓力，沒有太多時間來學習原始碼。當然，原始碼的學習還未終止。 在下半年，老闆介紹到團隊後面可能需要搞起flu

教你從0到1搭建一個完整的電商app---（簡介）

最近打算寫一個系列部落格，總結一下在學習慕課網《Kotlin打造完整電商APP 模組化+MVP+主流框架》課程的學習心得。正如課程名字一樣，這個專案使用Kotlin語言編寫，採用了當下一些主流的三方庫，Retrofit、Okhttp、Gson、Dagger2、R

iOS 從0到1搭建高可用App框架（二）

前言： 本文是繼《iOS 從0到1搭建高可用App框架》之後，通過專案實踐以及同行交流思考總結出來的一些新的架構思想，但初心仍不變，目的為搭建高可用App框架，保持框架底層健壯的同時讓程式碼更清晰，為後期頂層業務開發時，避免出現風格迥異的程式碼。 架構圖： 架構圖 效果