前言

僅適用于webpack4.+！

僅適用于webpack4.+！

僅適用于webpack4.+！

webpack的文檔其實(shí)已經(jīng)很詳細(xì)了，也在網(wǎng)上找了一些教程，總結(jié)下來(lái)還是官方文檔更加靠譜?？赡苁敲總€(gè)人的理解與表達(dá)的偏差。為了把流程按照自己能夠接受的方式梳理一遍，決定文字記錄一下。

開(kāi)始

基本安裝

1. 進(jìn)入指定目錄，創(chuàng)建項(xiàng)目文件夾

   cd code
   mkdir webpack-demo
   

2. 進(jìn)入項(xiàng)目文件夾，初始化npm

   cd webpack-demo
   npm init
   //執(zhí)行之后，一直回車至確認(rèn)yes之后
   //或者是直接執(zhí)行以下代碼跳過(guò)詢問(wèn)
   npm init -y
   

3. 安裝webpack

   npm install webpack webpack-cli --save-dev
   //局部安裝
   

4. 目錄結(jié)構(gòu)

   src文件夾用來(lái)存放源代碼（用來(lái)編輯的代碼）dist文件夾用來(lái)存放分發(fā)代碼（優(yōu)化處理后用來(lái)發(fā)布的代碼）

     webpack-demo
     |- package.json
   + |- /dist
   +   |- index.html
   + |- /src
   +   |- index.js
   

5. 調(diào)整package.json文件移除main入口，確保安裝包是私有的

     {
       "name": "webpack-demo",
       "version": "1.0.0",
       "description": "",
   +   "private": true,
   -   "main": "index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
       },
   

創(chuàng)建一個(gè) bundle 文件

以jquery為例

1. 要在 index.js 中打包jquery 依賴，我們需要在本地安裝 library

   npm install --save jquery
   

   注意：--save-dev 是你開(kāi)發(fā)時(shí)候依賴的東西，--save 是你發(fā)布之后還依賴的東西

2. 在src/index.js中通過(guò) import 引入 jquery

   import $ from 'jquery'
   

3. 生成bundle文件

   • 直接生成，通過(guò)運(yùn)行以下命令直接生成main.js文件至dist文件夾內(nèi)

     npx webpack
     

   • 指定出口入口

     npx webpack src/index.js --output dist/main.js
     

注意：npx可以運(yùn)行在初始安裝的 webpack 包(package)的 webpack 二進(jìn)制文件（./node_modules/.bin/webpack）

使用配置文件并優(yōu)化執(zhí)行命令

雖然webpack4可以自動(dòng)幫我們處理，但是我們絕大多數(shù)時(shí)候還是想要擁有對(duì)代碼更強(qiáng)的掌控能力，所以我們還是需要去學(xué)習(xí)如何配置webpack（雖然webpack的配置真的很操蛋）

1. 新建配置文件webpack.config.js

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     }
   };
   

2. 在package.json里添加scripts

     {
       "name": "webpack-demo",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
   +     "build": "webpack"
       },
   

現(xiàn)在，通過(guò)npm run build就可以運(yùn)行了！