webpack3_腳手架

時間  2019-11-08
標籤 webpack3 webpack 腳手架 简体版
原文   原文鏈接

 

webpack    記得 --save-dev 裝入開發依賴css

更新迭代快，須要有根據報錯解決問題的能力，來融會貫通這個工具html

這裏的是 webpack3，其實已經到了 webpack4 了前端

採用了 webpack 之後，就至關於一個工程化的項目(自動化工程項目)vue

  • 需求：
  • html、css、js 代碼檢錯
  • ES6 轉 ES5
  • flex、css 這樣的前綴兼容
  • html、css、js 代碼合併壓縮
  • 圖片處理
  • 熱更新實時刷新頁面
  • 什麼是 webpack

模塊打包工具，將全部的 前端資源文件 做爲模塊處理node

根據模塊的依賴關係，進行靜態分析，生成靜態資源react

腳手架 ---- (vue、react 有本身的腳手架)webpack

  • 核心概念

entry 入口 ---- 開始分析 的模塊git

output 輸出 ---- 分析完了放在哪兒，在哪兒建立 bundles 目標文件，默認值是 ./dist程序員

webpack 自己只識別處理 js 和 json，其餘文件處理不了，須要 loader 甚至 pluginses6

loader ---- webpack 處理不了的，讓 loader 處理

(好比 解決識別不了 less 引入的問題)

先去 官網找，再去 npm 找 loader

plugins 插件 ---- 處理 loader 也處理不了的

  • 文件夾 功能分析

src ---- 生雞蛋、生大米 ---- 最開始的源代碼

build ---- 熟雞蛋、熟大米 ---- 簡單的編譯併合並代碼 (4 個 css 合併成了 1 個 css 資源)

| dev ---- 模擬器 (模擬作飯) ---- 開發環境部署 (把 項目 藉助 webpack 用本身配置的服務器 部署起來運行)

dist ---- 蛋炒飯 ---- 最終通過編譯、壓縮、語法檢查等操做以後給生產環境的代碼

  • 基本使用：

安裝：

npm install webpack@3 -g

npm install webpack@3 --save-dev

webpack src/js/index build/index.js        // 第一次使用 webpack，自動生成 build 文件夾

今後 js、json、less 等文件均可以引入 build/index.js 入口文件

import '../less/demo.less';

import img from './img/react.img';

build/index.js 能夠直接運行，其中 json 引入時自動轉成了 對象

問題：

箭頭函數 未被轉換

  • 項目腳手架搭建

----------------- 1 ----------------> 使用 webpack 核心配置文件

npm install less-loader --save-dev    // 1. 解析 less

npm install css-loader --save -D    // 2. 把 css 變成一個 webpack 可識別的模塊

npm install style-loader --save -D    // 3. 生成 <style> 並嵌入 html 中

npm install file-loader --save-dev    // 解析 png、jpg、gif 圖片

npm install url-loader --save-dev    // 替代 file-loader

use:[

...

limit: 8192    // 當圖片 小於 8kb 時，將圖片變成 base64 編碼

 ]

1. 建立 webpack.config.js 核心配置文件    // 固定寫法

const path = require('path');    // node 內置模塊

 

module.exports = {

entry: './src/js/index.js',    // 整個 js 的入口文件，webpack 的入口文件

output: {        // 輸出配置

path: path.resolve(__dirname, ‘build’),    // 輸出文件路徑配置

filename: 'index.js'    // 輸出的文件名

},

module: {

rules: [

{   test: /\.less$/,    // 編譯 less ----> css

use:[

{loader: "style-loader"},    // 3. 生成 <style> 並嵌入 html 中

{loader: "css-loader"},    // 2. 把 css 變成一個 webpack 可識別的模塊

{loader: "less-loader"}   // 1. 編譯 less 成 css

]

},

{   test: "/\.(png|jpg|gif)$/"   // 處理圖片資源

user: [

loader: 'url-loader',

options: {

outputPath: 'img',    // 圖片最終輸出的位置

publicPath: '../build/img',    // css 資源圖片路徑

name: '[hash:5].[ext]'    // 修改圖片名稱

limit: 8192    // 當圖片小於 8kb 時，將圖片轉換爲 base64

}

]

}

]

}

}

2. 一條命令： webpack 或者 webpack --display-modules

------------------ 2 ----------------> 使用插件

ExtractTextWebpackPlugin

npm install --save-dev extract-text-webpack-plugin

---------------------------------------

const path = require('path');

 

// 1. 安裝插件

// 編譯 less 爲 css ，合併 css，再將 css 提取爲一個單獨的文件

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

 

module.exports = {

entry: './src/js/index.js', 

 

output: {

path: path.resolve(__dirname, ‘build’), 

filename: 'index.js'

},

 

module: {

rules: [

{   test: /\.less$/,

use: ExtractTextPlugin.extract({    // 2. 設置圖片解析

fallback: "style-loader",

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

})

},

 

{   test: "/\.(png|jpg|gif)$/", 

user: [ 

loader: 'url-loader', 

options: {

outputPath: 'img', 

publicPath: '../img',    // 3. less 文件與 img 文件的相對路徑 

name: '[hash:5].[ext]' 

limit: 8192 

}

]

}

]

},

plugins: [

new ExtractTextPlugin("./css/styles.css")    // 4. 實例化一個對象，指定生成路徑

] 

}

------------------- 3 --------------->  語法檢查 jshint-loader

webStorm 集成工具通常不用，由於協同開發配置可能不統一，致使沒必要要的錯誤

npm install --save  jshint-loader -D    // 添加到開發依賴

npm audit fix

npm install --save jshint -D    // 添加到開發依賴

npm audit fix

前期 2 ----> 7 後期

---------------------------------------

webpack.config.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: resolve(__dirname, 'build/js/'),    // 輸出到 build/js
        filename: "index.js"    // js 輸出文件
    },
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: '../img',    // build/js
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
    
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                                esversion: 6
                            }
                    }
                ]
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("../css/styles.css"),
    ]
};

webpack 執行編譯

------------------- 4 ---------------> 處理未轉換的 箭頭函數，即 ES6 ----> ES5

npm install  babel-loader@7  babel-core   babel-preset-es2015 --save -D

npm audit fix

----------------------------------

webpack.config.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: resolve(__dirname, 'build/'),    // 輸出到 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
    
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                                esversion: 6    
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
    ]
};

----------------- 5 -----------------> html 文件的清理 和 文件夾的清除插件

html-loader 沒什麼用 ----> 爲了讓 webpack 自動建立一個 html，

而後將需求的 js、css 引入該 html 文件，因此就須要 HtmlWebpackPlugin 插件 

npm install --save-dev html-webpack-plugin

npm audit fix

----------------------------------

webpack.config.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/js/index.js",
    output: {
        path: resolve(__dirname, 'build/'),    // 輸出到 webpack.build.js 同級的 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
    
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                            esversion: 6
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html"    // 程序員本身的 html
        })
    ]
};

------------------ 6 ----------------->  用來清空 build 文件夾 的插件

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

----------------------------------------------------

const CleanWebpackPlugin = require("clean-webpack-plugin");

...

new CleanWebpackPlugin("./build");

...

webpack.config.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: "./src/js/index.js",
    output: {
        path: resolve(__dirname, 'build/'),    // 輸出到 webpack.build.js 同級的 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
    
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                            esversion: 6
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html"    // 程序員本身的 html
        }),
        new CleanWebpackPlugin("./build")    // 用來清空 build 文件夾 的插件
    ]
};

------------------- 7 提交環境 ----------------> build 環境搭建

新建config 文件夾，將 webpack.build.js 放入其中

配置 package.json 的 scripts

 

"scripts": {
"build": "webpack --display-modules --config ./config/webpack.build.js"
...
...
output:{
path: resolve(__dirname, "../build/"), // 指定 輸出文件夾
...

 

// new CleanWebpackPlugin("./build");

new CleanWebpackPlugin("./build", {

root: resolve(__dirname, "../");    // 默認的 root 目錄爲 ./

});

...

./config/webpack.build.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: "./src/js/index.js",
    output: {
        path: resolve(__dirname, '../build/'),    // 輸出到 webpack.build.js 同級的 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
    
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                            esversion: 6
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html"    // 程序員本身的 html
        }),
        new CleanWebpackPlugin("./build", {
            root: resolve(__dirname, "../")    // 修改默認 root 目錄 "./" 爲 "../"
        })    // 用來清空 build 文件夾 的插件
    ]
};

------------------- 8 開發環境 ----------------> dev 開發環境的部署 (檢測到代碼的改變後，實時顯示結果)

dev 的運行方式是加載在內存中的，沒有任何輸出, 用戶察覺不到，執行時寫入內存，關閉時清除內存相關數據

在 build 配置文件的基礎上，增長 dev-server

entry、output、module、plugins + devServer

npm install webpack-dev-server@2 --save -D        // @3 有問題, 不能用

cp webpack.build.js webpack.dev.js

"dev": "webpack-dev-server --config ./config/webpack.dev.js"

devServer: {    // 之後用的就這麼幾個配置

hot: true,    // 模塊熱更新 (熱模替換, 也稱 HMR) ？ 沒必要刷新，便可實時顯示最新頁面

open: true,    // 自動打開瀏覽器 (取決於 PC 配置的默認瀏覽器)

port: 3001,    // 自定義開發服務器 端口號, 不必定要 3001

compress: true    // 啓用 gzip 來傳輸資源

}

npm run dev    // 有坑報錯： 模塊熱更新被禁止了

解決： 還須要引入 webpack 利用其上面的一個插件 webpack.HotModuleReplacementPlugin()

 

new webpack.HotModuleReplacementPlugin()    // 熱模更新 支持插件
此時運行 npm run dev

 

 

而後須要使用 loader 去處理 css 和 html ，才能實現 熱模替換

----> css 從新使用 loader 的方式

/****

-

改回傳統 loader, dev 環境自帶將 css 抽出爲一個文件，且 link 進 html ****/

+

----> html 也要追加使用傳統的 html-loader

npm install html-loader -D

...

entry: ["./src/js/index.js", "./src/index.html"]    // 讓 webpack 編譯 index.js 和 index.html

...

// module: { rules:[{    // 添加一個 loader 讓熱模更新起做用

----> js 必須刷新 html 頁面, 沒法解決，其實 html 也是刷新了頁面

webpack.dev.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    entry: ["./src/js/index.js", "./src/index.html"],
    output: {
        path: resolve(__dirname, '../build/'),    // 輸出到 webpack.build.js 同級的 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    module: {
        rules: [
            {    // dev 環境下使用傳統的 loader 處理 css
                test: /\.less$/,
                use: [
                    {loader:"style-loader"},    // 3. html 中創建 <style>，將 js 中 css 放入其中
                    {loader:"css-loader"},    // 2. 將 css 以 commonJS 打包到 js 中
                    {loader:"less-loader"},    // 1. 將 less 轉爲 css
                ]
            },
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
                            
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                            esversion: 6
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.(html)$/,
                use: {loader:"html-loader"}    // 僅僅讓熱模更新起做用
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html"    // 程序員本身的 html
        }),
        new CleanWebpackPlugin("./build", {
            root: resolve(__dirname, "../")    // 修改默認 root 目錄 "./" 爲 "../"
        }),    // 用來清空 build 文件夾 的插件
        new webpack.HotModuleReplacementPlugin()    // 熱模更新 支持插件
    ]
};

-------------------- 9 -----------------> 不一樣配合文件的公共部分合並, 實現複用

  • cp  webpack.build.js  webpack.common.js

公共部分：

入口、出口不動

處理圖片 loader 保留 url-loader

js 語法檢查 loader 保留 jshint-loader

es6 轉 es5 的 loader 保留 babel-loader

處理 html 的 loader 保留 html-loader (build 輸出 html, dev 熱更新支持)

刪除 less 文件處理 loader    (build 須要 ExtractTextPlugin 處理，dev 須要傳統 loader 方式處理支持熱更新)

刪除 CleanWebpackPlugin 由於 dev 無需清空文件夾，由於沒有生成 文件夾

刪除 ExtractTextPlugin 插件 dev 不用

webpack.common.js

  • const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/js/index.js",
    
    output: {
        path: resolve(__dirname, '../build/'),    // 輸出到 webpack.build.js 同級的 build/
        filename: "./js/index.js"    // js 輸出文件 build/
    },
    
    module: {
        rules: [
            {    // loader 讓 webpack 處理圖片，並有 base64 功能
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options:{
                            outputPath: './img',    // build/
                            publicPath: '../img',    // build/css/styles.css
                            name:'[hash:5].[ext]',
                            limit: 8192
                        }
                    }
                ]
            },
            {    // js 檢錯功能
                test: /\.js$/,    // 覆蓋 .js 文件
                enforce: "pre",    // 預先加載好 jshint-loader
                exclude: /node_modules/,    // 排除掉 node_modules 文件夾下的全部文件
                use: [
                    {
                        loader: "jshint-loader",
                        options: {    // camelcase 已經棄用了
                            // jslint 的錯誤信息在默認狀況下會顯示爲 warning（警告）類信息
                            // 將 emitErrors 參數設置爲 true 可以使錯誤顯示爲 error（錯誤）類信息
                            emitErrors: false,
                            
                            // jshint 默認狀況下不會打斷 webpack 編譯
                            //若是你想在 jshint 出現錯誤時，馬上中止編譯, 設置 failOnHint 參數爲 true
                            failOnHint: false,
                            esversion: 6
                        }
                    }
                ]
            },
            {    //es6 轉 es5
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html"    // 程序員本身的 html
        }) // 用來清空 build 文件夾 的插件
    ]
};
  • 在 webpack.build.js 中

npm install webpack-merge --save -D

...

const common = require("./webpack.common");     // 1. 引入 webpack.common.js 公共部分

const merge = require("webpack-merge");    // 2. 使用第三方庫，合併

// 3. 合併 common 公共部分

 

保留

less 處理成一個 css 並抽出爲一個文件

刪除

入口、出口、

圖片處理、語法檢查、es6 轉 es5

webpack.build.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

const common = require("./webpack.common");    // 1. 引入 webpack.common.js 公共部分
const merge = require("webpack-merge");    // 2. 使用第三方庫，合併

module.exports = merge(common, {    // 3. 合併 common 公共部分
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({    // 將 css 抽取成一個文件，並引入 html 文件
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
        ]
    },
    
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/styles.css"),    // build/
        new CleanWebpackPlugin("./build", {
            root: resolve(__dirname, "../")    // 修改默認 root 目錄 "./" 爲 "../"
        })    // 用來清空 build 文件夾 的插件
    ]
});
  • 在 webpack.dev.js 中

...

const common = require("./webpack.common");     // 1. 引入 webpack.common.js 公共部分

const merge = require("webpack-merge");    // 2. 使用第三方庫，合併

// 3. 合併 common 公共部分

不刪

入口

刪除

出口

圖片處理、語法檢查、es6 轉 es5

ExtractTextPlugin 無需處理 less 爲css 再爲文件，dev 熱更新自帶功能

cleanWebpackPlugin 無需清除文件夾，由於根本沒生成過文件夾

webpack.dev.js

  • const {resolve} = require('path');
const webpack = require('webpack');

const common = require("./webpack.common");    // 1. 引入 webpack.common.js 公共部分
const merge = require("webpack-merge");    // 2. 使用第三方庫，合併

module.exports = merge(common, {    // 3. 合併 common 公共部分
    entry: ["./src/js/index.js", "./src/index.html"],
    
    module: {
        rules: [
            {    // dev 環境下使用傳統的 loader 處理 css
                test: /\.less$/,
                use: [
                    {loader:"style-loader"},    // 3. html 中創建 <style>，將 js 中 css 放入其中
                    {loader:"css-loader"},    // 2. 將 css 以 commonJS 打包到 js 中
                    {loader:"less-loader"},    // 1. 將 less 轉爲 css
                ]
            },
            {
                test: /\.(html)$/,
                use: {loader:"html-loader"}    // 僅僅讓熱模更新起做用
            }
        ]
    },
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new webpack.HotModuleReplacementPlugin()    // 熱模更新 支持插件
    ],
    
    devServer: {    // 之後用的就這麼幾個配置
        hot: true,    // 模塊熱更新 (熱模替換, 也稱 HMR)
        open: true,
        port: 3001,
        compress: true
    }
});

---------------- 10 產品上線環境----------------> dist 環境配置 --或者說-- prod 環境配置

(壓縮js、擴展前綴兼容、壓縮 css、壓縮 html)

  • cp webpack.build.js webpack.dist.js
  • dist: "webpack --display-modules --config ./config/webpack.dist.js";
  • 修改出口配置

output: {

path: resolve(__dirname, '../dist/'),    // 輸出到 webpack.build.js 上一級的 dist 文件夾下

filename: "./js/[name].[hash:10].js"    // main.84374adda4.js

},

  • 修改 css 插件配置

plugins: [    // 將 css 抽出成一個文件，以備 link 進 html

new ExtractTextPlugin("./css/[name].[hash:10].css"), 

...

  • 壓縮 js 須要插件 UglifyJsPlugin()
  • npm install UglifyJsPlugin --save -D        // 壓縮 js

const webpack = require("webpack");    // 1. 引入 webpack

new webpack.optimize.UglifyJsPlugin({    // 2. 追加一個插件

sourceMap: true    // 3. 生成映射文件，開發人員能夠查找錯誤

})

...

devtool: ‘source-map’    // 4. 新增配置

...

運行會發現，全部代碼資源都已經壓縮了，包括 html

  • css 擴展前綴： 有些測試屬性，在不一樣的瀏覽器須要加對應的前綴兼容

1. npm install postcss-loader --save -D        // 將測試樣式 加 前綴 處理兼容

2. 在 use:  EtractTextPlugin.extract({

...

use:[新增一個 postcss-loader]    // 順序要注意，不然報錯

3. 在 package.json 同級目錄，新建 postcss.config.js

module.exports = {

"plugins":{

"autoprefixer":{

"browsers":[

"ie>=8",

"ff>=30",

"chrome>=34",

"safari>=7",

"opera>=23"

]

}

}

}

4. npm install autoprefixer -save -D        // 擴展前綴

5. npm install less-plugin-clean-css --save -D        // 壓縮 css

const CleanCssPlugin = require("less-plugin-clean-css");    // 1. 引入插件

// 2. 替換 use 中的 less-loader 以下

{loader:"less-loader", options:{

plugins:[new CleanCssPlugin({advanced: true})]

}

}

6. 添加 一個刪除文件夾的插件

new CleanWebpackPlugin("./dist", {

root: resolve(__dirname, "../")

})

7. npm install html-webpack-plugin --save -D        // 使用 html-webpack-plugin 插件壓縮 html 中的 minify: {}

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

// 並追加一個配置 minify:{removeComents:true, collapseWhitespace: true}

webpack.dist.js

  • const {resolve} = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");    // 4. 引入 webpack, 利用其 API 壓縮 js
const CleanCssPlugin = require("less-plugin-clean-css");    // 9. 引入插件，壓縮 css
const HtmlWebpackPlugin = require('html-webpack-plugin');    // 12. 引入插件，壓縮壓縮 html
const common = require("./webpack.common");    // 1. 引入 webpack.common.js 公共部分
const merge = require("webpack-merge");    // 2. 使用第三方庫，合併

module.exports = merge(common, {    // 3. 合併 common 公共部分
    output: {
        path: resolve(__dirname, '../dist/'),    // 輸出到 webpack.build.js 上一級的 dist
        filename: "./js/[name].[hash:10].js"    // main.72856.js
    },
    
    module: {
        rules: [
            {    // less 編譯成 css,
                test: /\.less$/,
                use: ExtractTextPlugin.extract({    // 將 css 抽取成一個文件，並引入 html 文件
                    fallback: "style-loader",
                    use: [
                        "css-loader",
                        "postcss-loader",    // 8. 前綴兼容
                        {
                            loader:"less-loader",    // 10. 新增 less-loader 配置有壓縮 css
                            options:{plugins:[new CleanCssPlugin({advanced: true})]}
                        }
                    ]
                })
            },
        ]
    },
    
    plugins: [    // 將 css 抽出成一個文件，以備 link 進 html
        new ExtractTextPlugin("./css/[name].[hash:10].css"),    // build/
        new CleanWebpackPlugin("./dist", {    // 11. 修改清除文件夾
            root: resolve(__dirname, "../")    // 修改默認 root 目錄 "./" 爲 "../"
        }),    // 用來清空 build 文件夾 的插件
        new webpack.optimize.UglifyJsPlugin({    // 5. 追加一個插件
            sourceMap: true    // 6. 生成映射文件，開發人員能夠查找錯誤
        }),
        new HtmlWebpackPlugin({    //
            title: "webpack",    // 網頁 <head> <title>的頁簽名字
            filename: "index.html",    // 生成文件的名字
            template: "./src/index.html",    // 程序員本身的 html
            minify:{removeComents:true, collapseWhitespace: true}    // 13. 壓縮html
        })    // 用來清空 build 文件夾 的插件
    ],
    
    devtool: 'source-map'    // 7. 新增配置
});

-------------------------------------

項目 - 腳手架搭建完成 - 源碼

 

npm install webpack@3 --save -D  //局部安裝

npm install less-loader less --save -D

npm install css-loader style-loader --save -D

npm install file-loader --save -D

npm install url-loader --save -D

npm install extract-text-webpack-plugin --save -D

npm i jshint-loader --save -D

npm audit fix

npm i jshint --save -D

npm install babel-loader@7 babel-core babel-preset-es2015 --save -D

npm install html-webpack-plugin --save -D

npm i clean-webpack-plugin --save -D

npm i webpack-dev-server@2 --save -D

npm i html-loader --save -D

npm i webpack-merge --save -D

npm i postcss-loader --save -D

npm i autoprefixer --save -D

npm i less-plugin-clean-css --save -D

npm i less-plugin-clean-css html-withimg-loader --save -D

 {     test: /\.(htm|html)$/i,      use:[ 'html-withimg-loader']  },    // 2. 加入 loader 處理 html 中的 img-src 問題

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程