Webpack的安裝與使用

webpack 經常使用安裝命令

webpack 安裝及刪除命令：

npm/cnpm install webpack -g (全局安裝)
npm/cnpm uninstall webpack -g (全局卸載)
npm/cnpm install webpack -s (局部安裝)
npm/cnpm uninstall webpack -s (局部卸載)

安裝時，加上 '--save' 安裝寫在 package.json 的 dependencies配置中，加 '--save-dev' 或 '-D' 會在 devDependencies 裏寫上安裝配置。

安裝 webpack-cli

npm/cnpm install --save-dev webpack-cli -s //局部安裝 （webpack 4.0必須安裝）

快速建立 package.json 文件

npm/cnpm init -y

安裝style-loader、css-loader

css-loader負責將css文件解析成js字符串，style-loader負責將解析的樣式字符串放進頁面的標籤中
npm/cnpm i style-loader css-loader -D

安裝post-loader、autoprefixer

用於自動檢測給css樣式屬性添加前綴
npm/cnpm i post-loader autoprefixer -D

安裝file-loader、url-loader

兩個loader用來加載圖片、字體等文件，url-loader是基於file-loader寫的一個loader，使用url-loader，必須同時安裝file-loader
兩個loader在webpack.config.js的配置中寫法基本相同，url-loader比file-loader多一個limit屬性，用來設定一個把文件編譯成base64碼文件大小範圍
npm/cnpm i file-loader url-loader -D

安裝less-loader 或 sass-loader 和 babel-loader

less-loader和sass-loader分別是用來編譯css的預編語言less和sass的
babel-loader 用於將ES6轉譯爲ES5
npm/cnpm i less-loader -D
npm/cnpm i babel-loader @babel/core @babel/preset-env -D //babel須要裝3個

安裝webpack-dev-server

安裝命令： //之因此要安裝局部webpack 和 webpack-cli 是由於啓動webpack-dev-server 須要這兩個輔助
cnpm i webpack webpack-cli webpack-dev-server

webpack-dev-server命令須要經過webpack-cli查找，因此這個命令必須配置在package.json中，webpack-cli解析package.json時查找到該命令
使用熱更新 webpack-dev-server 時，在開發環境下每次更改代碼，它都會自動編譯生成一個新的緩存文件(該文件不會輸出，只存在緩存中，默認路徑直接存在於根目錄下，例如：boundle.js, 真正打包後的文件輸出在打包文件夾dest裏 dest/boundle.js )，瀏覽器會使用這個緩存文件，從而達到熱更新效果。

因此須要編寫兩套配置文件，一個用於開發環境，一個用於生產環境
每次更改配置文件都要從新啓動 webpack-dev-server，由於package.json文件是在啓動時讀取的。

動態配置
webpack.config.js

//靜態
module.exports={

};

//動態
module.exports=function (env, argv){
  return {
    //共用
    entry: '...',
    ...

    //獨立
    ...env.production?require('./config/webpack.production'):require('./config.webpack.development')
  }
};

安裝 html-webpack-plugin

是一個用來操做HTML的plugin，輸出HTML，在webpack.config.js中配置以下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
{
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      template: 'html文件模板路徑'
    })
  ]
}

代碼風格檢測 eslint

須要安裝：eslint、eslint-loader，用於統一代碼編寫風格
npm/cnpm eslint eslint-loader -D
package.json文件的script中，配置 "eslint_init": "eslint --init"
運行命令： npm/cnpm run eslint_init 根據需求生成一個 .eslintrc.js 代碼風格檢測規則配置文件

代碼單元測試工具 dest

須要安裝 jest、 jest-webpack
cnpm i jest jest-webpack -D

package.json中配置命令: "test": "jest-webpack"
使用該工具須要寫測試用例（測試用例是在 node 環境中運行）：
新建一個test文件夾用於存放測試用例，測試用例js的大體框架以下：

const mod=require('../src/js/num');   //引入被測試的文件

test('test sum', ()=>{  //測試集 suite
  expect(mod.sum(12, 5)).toBe(17);  //測試項
  expect(mod.sum(1, 1)).toBe(2);
  expect(mod.sum(0, 0)).toBe(0);
});

webpack.config.js文件配置

1.mode:
none 不優化
development 輸出調試信息，設置process.env.NODE_ENV
production 最高
2.entry：入口
單入口——SPA
多入口——MPA
3.output：輸出
{
path: 路徑——必須是絕對路徑 path.resolve
filename: 文件名
}

webpack.config.js靜態配置

webpack.config.js動態配置

根據不一樣運行環境進行不一樣的配置，不一樣運行環境的配置單獨創建一個配置文件，再經過在webpack.config.js文件進行環境判斷來引入運行不一樣的配置文件，示例以下，
webpack配置入口文件：

開發環境配置文件：

生產環境配置文件：

測試環境配置文件：