webpack4.0從零開始單頁（多頁）應用配置 (一)

理解webpack核心概念

借用官網的話：「 webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器( module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖( dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。」

如圖加上概述，開發的各類js模塊，以及圖片 + sass代碼等 經過webpack編譯以後生成單個js文件css文件等

webpack4.0遷移

如：

• module.loaders 改成 module.rules
• json-loader 再也不須要手動添加
• UglifyJsPlugin 壓縮 loaders;

使用new webpack.LoaderOptionsPlugin()代替

new webpack.LoaderOptionsPlugin({
    minimize: true
})

• ExtractTextWebpackPlugin 再也不推薦使用，改成mini-css-extract-plugin

以及經常使用的CommonsChunkPlugin被optimization.splitChunks代替
瞭解更多能夠查看webpack官網指南，裏面有遷移介紹，以及各個部分都有講哪些被棄用

webpack組成部分

module.exports = {
    entry: {},  //入口起點，指示webpack應用使用哪一個模塊 支持String|Array|Object
    output: {}, //出口，告訴 webpack 在哪裏輸出它所建立的 bundles，以及命名文件default: './dist'
    module: {}, //loader插件，處理一些非javascript代碼，轉化爲可用的代碼
    plugins: [], //webpack相關插件
    resolve: {}, //用於幫助找到模塊的絕對路徑。一個模塊能夠做爲另外一個模塊的依賴模塊，而後被後者引用
    devServer: {},//經過node起一個本地服務器，webpack-dev-server完成一些代理，mock數據熱加載等功能
    devtool: '',//此選項控制是否生成，以及如何生成 source map。主要用於開發和生產代碼類型
    mode: '', //模式 
    optimization: {}//優化生成的文件，如合併commonsChunks等 
}

webpack基礎功能配置

基礎的已經弄懂以後，固然一行一行的配置纔能有更加清晰的認知啦~

建立package.json

執行 npm init -y 或者 npm init -f 這兩個會跳過提問階段，直接生成新的package.json

安裝webpack和webpack-cli

npm i webpack webpack-cli --save-dev

會發現根目錄下多了node_modules文件夾，主要存放npm相關包的文件

修改package.json 和 webpack

在根目錄下建立webpack.config.js並把以前寫的webpack組成部分添加進去,
package.json添加

"dev": "webpack --mode development",
"build": "webpack --mode production"

或者將webpack.config.js的mode設置爲"production"生產模式|"none"不區分|"development"開發環境

配置entry和output

若是在以前package.json裏未設置 --mode 的話須要在配置裏添加mode項並設置!
entry: 支持String, Object, Array 類型 String表示單個入口類型，Object表示多個入口，Array會將數組裏的多個文件打包合併生成一個文件(若是filename未使用模板，輸出的名稱爲數組的最後一個值的名稱)！
output: 與entry相呼應entry的配置不同，output可能稍有不一樣，例：若是entry配置的是多入口output.filename須要將名稱設置爲[name].js
這裏使用多入口爲例：

const path = require('path');

module.exports = {
    entry: {
        index: './src/index.js'，
        main: './src/main.js'
    },  
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }, 
    mode: 'none', //模式 
}

添加上述代碼後執行npm run build會發現dist目錄下會生成一個index與main文件

如何引入css文件且進行編譯

接下來在src目錄下添加style.css文件:

body{
    background-color: red;    
}

且修改index.js文件：

import './style.css';
console.log('嘻嘻')

如今咱們直接build文件,會發現令程序員最討厭的紅色字體來了~

在 webpack的組成部分這節有講 : module: {}, //loader插件，處理一些非javascript代碼，轉化爲可用的代碼

因此要想在js裏引用css能生效，須要在module裏配置loader;

安裝css-loader： npm install --save-dev css-loader

修改webpack.config.js配置

const path = require('path');
module.exports = {
    entry: {
        index: './src/index',
        main: './src/main'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }, 
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    'css-loader'
                ]
            }
        ]
    }, 
    mode: 'none' 
}

安裝成功配置後從新執行npm run build

徹底能夠成功編譯成功了嘛，是否是感受也沒有多複雜，手動emjio...
等等！！！

css的確實是編譯成功了，但查看dist目錄發現並無css文件？查看index.js文件發現css代碼在js文件裏能夠找到，若是是這樣，我直接在html引入這個js文件會生效嗎？引入以後發現並不能夠，由於css-loader只是容許import或者require文件進來，並無添加到dom以後，須要添加style-loader才能解決這個問題

安裝style-loader： npm install --save-dev style-loader修改module的配置

rules: [
    {
        test: /\.css/,
        use: [
            'style-loader',
            'css-loader'
        ]
    }
]

再build以後引入，發現樣式已經能夠生效~但打包完後咱們須要本身引入文件是否是很麻煩？webpack插件就是用來解決這些麻煩的，見下：

自動建立html

安裝html-webpack-plugin: npm install --save-dev html-webpack-plugin
修改webpack.config.js配置以下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: {
        ...同上
    },
    output: {
        ...同上
    }, 
    module: {
       ...同上
    }, 
    plugins: [
        new HtmlWebpackPlugin({
            title: 'hello word',
            template: './index.html',
            minify: {
                collapseWhitespace: true, //摺疊空白區域
                removeComments: true, //刪除註釋
                hash: true, //是否須要對src引的文件後面加上Hash，使用時須要區分開發環境和生產環境
                chunks: [],//容許添加一些額外的文件
                chunksSortMode: 'manual' //chunks的文件順序注入
            }
        })
    ],
    mode: 'none', 
}

執行npm run build會發現dist目錄下會新增一個Index.html文件且自動引入了生成的文件

每次編碼後不想手動更新？

此處咱們使用HRM的方式，依賴於webpack-dev-server,devServer的配置項不少，這裏只是使用了 其中不多的幾項，更多配置能夠查看官網部分，好比實現代理，mock數據等!

安裝webpack-dev-server: npm install --save-dev webpack-dev-server

修改package.json中的dev：以下：

修改webpack.config.js文件配置添加devServer的配置：

devServer: {
    contentBase: path.join(__dirname, 'dist'),// 服務器資源的根目錄，不寫的話，默認爲bundle.js
    hot: true, //啓用熱加載
    host: 'localhost',
    port: 8800,//端口號
    compress: true, // 服務器資源採用gzip壓縮
}

執行npm run dev 發現本地已經起了一個server服務，頁面上訪問http://localhost:8800，與剛剛訪問的頁面效果相同！

配置devTool

修改webpack.config.js的devTool項

devtool: 'cheap-module-eval-source-map'
//原始源代碼 （注意：此處'cheap-module-eval-source-map'
//只適用於開發環境，因此在使用的時候這裏須要作一個區分，開發環境配置此項，生產能夠配置爲'none'）

源碼地址：https://github.com/comeOutBing/log/tree/master/log/webpack_blog

到此一個簡易的webpack配置已經完成了，固然不少地方還待優化，在後面會繼續更新優化的地方~本身也簡單總結了一張圖
若有問題請指出

參考連接：

[https://github.com/jantimon/html-webpack-plugin#options][10]