webpack基本配置

Demo及筆記：https://github.com/18291907191/webpack

 

# 前端構建工具Webpack的學習

 

## 什麼是webpack？

 

> 百度詞條：「Webpack 是一個開源的前端打包工具。Webpack 提供了前端開發缺少的模塊化開發方式，將各類靜態資源視爲模塊，並從它生成優化過的代碼。要使用Webpack 前須先安裝Node.js。」

 

## webpack能夠作什麼？

 

1. 優化：刪除多餘的冗餘代碼，壓縮；

2. 轉換：jsx，es6，es6的語法轉換，less，sass等預編譯處理器的轉換；

3. 打包：合併多餘文件，減小請求次數，加快響應；

4. devServer代理解決跨域問題。

5. ......

 

## 目標

 

1. 經過webpack完成對公司現有項目從0開始的定製化搭建；

2. 摒棄如今腳手架中冗餘的代碼及配置；

3. 瞭解wbpack的一些原理，流程。

 

## 結構 

module.exports = {
    mode: "development", // 模式 =》 開發模式，生產模式
    entry: 'src/main.js', // 入口
    output: __dirname, // 輸出
    module: {}, // 加載轉換=》less || sass || 圖片|| j'sx || es6 || es7
    plugins: [], // 插件
    devServer: {}, // 服務代理
    resolve: {}, // 特殊問題的解決方案
}

## 基本配置與命令行操做

 

### 命令行操做

 

安裝：

npm i webpack webpack -cli -g

 

webpack：webpack的核心模塊

 

webpack-cli：執行webpack相關的命令行

webpack -v 查看當前webpack的版本號
webpack --mode development/production 指定webpack的運行模式爲開發模式/生產模式，默認是生產模式
webpack --config filename 指定webpack命令依賴的配置文件，默認是webpack.config.js文件
webpack src/main.js --output filename 指定輸出文件爲filename,默認輸出文件爲dist/main.js

###基本配置

 

1. 在項目根目錄執行npm init -y生成package.json文件

2. 在scripts對象中添加命令

"scripts": {
    "build": "webpack src/main.js --mode development"
}

3. 執行npm run build命令時，就至關於執行了webpack src/main.js --mode development命令

 

## 屬性詳解

 

### entry

module.exports = {
    // 字符串：單個入口單個輸出
    // 數組：多個入口單個輸出
    // 對象：多個入口多個輸出 對象的屬性名one和two可經過name做爲輸出的文件的名字前綴
    entry: "src/one.js" || ["src/one.js","src/two.js"], {
        one: "src/one.js",
        two: "src/two.js"
    }，
    output: {
    filename: "[name].blund.js", // 這裏的name就是entry爲對象時的屬性名
    },
}    

### output

module.exports = {
    // 對象 {filename:'打包後文件的名字', path: '打包後文件的路徑'}
    output: {
        filename: "[name].blund.js", // 這裏的name就是entry爲對象時的屬性名。
        filename: "[hash].blund.js", // 這裏的hash及時一個隨機的一個哈希字符，確保打包後文件名字的惟一性
        path: __dirname + '/dist', //打包後就是在webpack當前目錄下的dist下
    }
}            

### plugins

webpack依賴於Node.js。所以引入依賴模塊時須要使用node.js的模塊導入

####clean-webpack-plugin

 

> 能夠實如今打包時，清空原有的內容，該插件每次迭代使用方法差距較大須要關注官方文檔

>

> 下載：npm i clean-webpack-plugin -D

 

####html-webpack-plugin

 

> 默認會在dist文件下生成一個html文件並引入打包好的js文件，詳細功能見demo

>

> 下載：npm i html-webpack-plugin -D

 

#### extrace-text-webpack-plugin

 

> 拆分打包後的css文件到單獨的css文件夾，而不是加載到HTML的style中

>

> 下載：npm i extract-text-webpack-plugin

 

### module

 

各個模塊的加載轉換預編譯處理器=》css，es6抓換成es5等。

 

####css

// npm install style-loader css-loader -D
module: {
    rules: [
        {
        test: /.\.css$/, //醫生的藥房，道士的畫符，程序員正則，天下三大奇聞。
        // npm install style-loader css-loader -D
        // loader: ["style-loader","css-loader"], //加載css而後將css放置到style標籤中
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        }) // 拆分打包後的css文件 需在插件中註冊
    },
    ]
},            

####less

// npm install style-loader css-loader less less-loader -D
module: {
    rules:[
        {
        // npm i less-loader less -D
        // 將less轉換爲css並加載轉換後的css到style
        test: /.\.less$/,
        // loader: ["style-loader","css-loader","less-loader"],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader","less-loader"]
        }) // 拆分打包後的css文件 需在插件中註冊
    },
    ]
},

####sass

// npm install style-loader css-loader sass-loader node-sass -D
module: {
    rules: [
    {
    // npm i sass-loader node-sass -D
        test: /.\.scss$/,
    // loader: ["style-loader","css-loader","sass-loader"]
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader","sass-loader"]
        }) // 拆分打包後的css文件 需在插件中註冊
    },
    ]
},    

#### image

 

```js

// npm i url-loader file-loader -D

module: {

rules: [

{

// npm i url-loader file-loader -D

test: /.\.(jpg|jpeg|gif|svg)$/,

// loader: ["url-loader"],

use: [

{

loader: "url-loader",

query: {

limit: "1844560", // 指定圖片的大小，當圖片字節小於該值時，轉換成base64,當圖片字節小於該值時，須要安裝file-loader

outputPath: "img", //指定圖片放置的文件夾

}

}

]

},

]

},

```

 

#### jsx|es6|es7|es8|es9...

 

```js

// npm install babel-loader babel-core babel-preset-react babel-preset-env -D

module: {

rules: [

{

// npm install babel-loader babel-core babel-preset-react babel-preset-env

test: /.\.(js|jsx)/,

exclude: /node_modules/, // 排除指定的文件

loader: "babel-loader",

query: {

presets: [

"babel-preset-react",

"babel-preset-env"

]

}

}

]

},

resolve: {

extensions: [".js",".jsx"], //解決.jsx不識別的問題

},

```

 

注：

 

1. 之因此要配置這些東西，是爲了支持在js中引入這些css/img靜態資源文件，並將這些資源打包加載。

2. 須要注意的是loader:["stye-loader","css-loader"],這兩個必須在開始且順序不能亂，由於他的執行是從右開始執行，好比說less轉換成css=》加載到style=》extract拆分到單獨的路徑。

 

### devServer

 

設置webpack的服務模塊，可設置服務代理，解決跨域問題

 

```js

module.exports = {

devServer: {

open: true, // 是否在瀏覽器中自動打開

port: 8081, // 設置端口號

host: '127.0.0.1', // 設置訪問地址

historyApiFallback: true, // 訪問不存在的路由時進行重定向

proxy: {

// 反向代理

"/mock": { // 代理的前綴標識

target: "https://m.lagou.com", //請求的服務

changeOrigin: true,

pathRewrite: {

"^/mock": ""

}

}

}

},

}

```

##demo

 

```js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

 

module.exports = {

mode: "development", // 開發模式/生產模式 默認是生產

entry: "./src/main.js", // 對象(多入口多輸出)，數組（多入口，單輸出），字符串（單入口，單輸出）

output: {

filename: "index.js",

path: __dirname + "/dist"

}

plugins: [

new CleanWebpackPlugin(),

new HtmlWebpackPlugin({

template: "./public/index.html", // 指定模板地址 將模板複製一份放入dist文件，並引入打包後的js文件

filename: "index.html", // 打包後的文件的名字

inject: "body" || 'head' || true || false, // 打包後的html是否引入js文件，或引入js文件的位置, 默認爲true

chunks: ["one","two"], // 多出口時 指定html引入哪些出口文件

excludeChunks: ["one","two"], // 多出口時，指定html過濾掉那些出口文件, 默認不設置時引入全部輸出文件

title: "學習webpack", // 須要配合模板語法來使用 <%= htmlWebpackPlugin.options.title%>

minify: {

removeCommonts: true, // 清除註釋

removeAttributeQuotes: true, // 移除雙引號

removeEmptyElements: true, // 刪除空元素

collapseWhitespace: true, // 進行摺疊去除空格

//......

}, // 壓縮的一些設置

}),

new ExtractTextPlugin("css/styles.css"), // 指定分離後的css文件路徑 須要配合module下rules下ExtractTextPlugin.extract({})來使用

],

module: {

// 加載轉換. css less sass 圖片jsx react es6

rules: [

{

test: /.\.css$/, //醫生的藥房，道士的畫符，程序員正則，天下三大奇聞。

// npm install style-loader css-loader -D

// loader: ["style-loader","css-loader"], //加載css而後將css放置到style標籤中

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader'

})

},

{

// npm i less-loader less -D

// 將less轉換爲css並加載轉換後的css到style

test: /.\.less$/,

// loader: ["style-loader","css-loader","less-loader"],

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: ["css-loader","less-loader"]

})

},

{

// npm i sass-loader node-sass -D

test: /.\.scss$/,

// loader: ["style-loader","css-loader","sass-loader"]

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: ["css-loader","sass-loader"]

})

},

{

// npm i url-loader file-loader -D

test: /.\.(jpg|jpeg|gif|svg)$/,

// loader: ["url-loader"],

use: [

{

loader: "url-loader",

query: {

limit: "1844560", // 指定圖片的大小，當圖片字節小於該值時，轉換成base64,當圖片字節小於該值時，須要安裝file-loader

outputPath: "img", //指定圖片放置的文件夾

}

}

]

},

{

// npm install babel-loader babel-core babel-preset-react babel-preset-env

test: /.\.(js|jsx)/,

exclude: /node_modules/, // 排除指定的文件

loader: "babel-loader",

query: {

presets: [

"babel-preset-react",

"babel-preset-env"

]

}

}

]

},

module: {

// 加載轉換. css less sass 圖片jsx react es6

rules: [

{

test: /.\.css$/, //醫生的藥房，道士的畫符，程序員正則，天下三大奇聞。

// npm install style-loader css-loader -D

// loader: ["style-loader","css-loader"], //加載css而後將css放置到style標籤中

use: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader'

})

},

{

// npm i less-loader less -D

// 將less轉換爲css並加載轉換後的css到style

test: /.\.less$/,

// loader: ["style-loader","css-loader","less-loader"],

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: ["css-loader","less-loader"]

})

},

{

// npm i sass-loader node-sass -D

test: /.\.scss$/,

// loader: ["style-loader","css-loader","sass-loader"]

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: ["css-loader","sass-loader"]

})

},

{

// npm i url-loader file-loader -D

test: /.\.(jpg|jpeg|gif|svg)$/,

// loader: ["url-loader"],

use: [

{

loader: "url-loader",

query: {

limit: "1844560", // 指定圖片的大小，當圖片字節小於該值時，轉換成base64,當圖片字節小於該值時，須要安裝file-loader

outputPath: "img", //指定圖片放置的文件夾

}

}

]

},

{

// npm install babel-loader babel-core babel-preset-react babel-preset-env

test: /.\.(js|jsx)/,

exclude: /node_modules/, // 排除指定的文件

loader: "babel-loader",

query: {

presets: [

"babel-preset-react",

"babel-preset-env"

]

}

}

]

},

resolve: {

extensions: [".js",".jsx"], //解決.jsx不識別的問題

},

devServer: {

open: true, // 是否在瀏覽器中自動打開

port: 8081, // 設置端口號

host: '127.0.0.1', // 設置訪問地址

historyApiFallback: true, // 訪問不存在的路由時進行重定向

proxy: {

// 反向代理

"/mock": { // 代理的前綴標識

target: "https://m.lagou.com", //請求的服務

changeOrigin: true,

pathRewrite: {

"^/mock": ""

}

}

}

},

}

```

做者： 狗尾草

個性簽名：海到無邊天做岸，山登絕頂人爲峯！