webpack學習(二) -- 配置文件及五大核心概念

webpack4配置學習

上文學習了webpack基礎安裝及執行，接下來學習一下webpack的一些基礎配置。 webpack一切皆模塊，默認處理js，不管是js、sass、png、jpg都屬於模塊，全部模塊默認有一個入口模塊，從入口模塊開始打包，入口文件中有依賴其餘模塊，再把其餘模塊打包。

命令行配置

洗衣機

• webpack是一個打包工具，爲了更好的理解他的配置，咱們來打個比方：
• 小女子比較懶，平時洗衣服幾乎都是洗衣機，洗衣機就至關於webpack工具，洗衣服的時候，直接塞進去，按開始鍵，洗衣機就按照它默認的程序執行洗衣步驟。
• 若是哪天我要洗羊毛料的衣服，我須要按洗衣機的按鈕，選擇羊毛，這個過程就是配置過程，洗衣機就按照我配置的方法洗衣服。
• 接下來就看看洗衣機怎麼配置吧，哦不。。。是webpack

入口文件

• 那麼在咱們沒配置文件的時候，執行webpack默認的入口文件爲：

當前執行命令的文件夾下-->src文件-->index.js
複製代碼

默認的出口文件爲：

當前執行命令的文件夾下-->dist文件-->main.js
複製代碼

• 自行配製

當默認有多個入口/默認的入口不在當前的src下的index.js時，就須要咱們‘按洗衣機鍵子’啦，否則工具不知道該從哪一個文件開始，從哪一個文件輸出，強制執行估計它會崩潰吧，哈哈:

一、在命令行輸入

webpack demo.js -o bundle.js  
//demo.js爲要打包的文件，-o爲output，及輸出，將打包文件輸出爲bundle.js文件,在html文件中script標籤引入bundle.js便可

- 若要設置打包的模式
webpack demo.js -o bundle.js --mode development
//--mode development意爲設置mode(模式)爲開發模式
複製代碼

二、在文件夾中建立配置文件webpack.config.js

//下方詳解
複製代碼

webpack核心概念及配置文件

配置文件

• 遵循common.js規範
• 在項目中，咱們每每不會使用webpack的默認配置，在當前項目建立一個配置文件

webpack.config.js

• 當在命令行輸入webpack執行打包，會發現，它變心了，它就不找src下的index.js了，而是找咱們的配置文件了，固然，前提是你的配置文件名爲webpack.config.js。

• 當一個項目不一樣環境使用不一樣打包配置文件時命令行輸入

webpack --config 配置文件名
複製代碼

---

下面在瞭解核心概念時，我會同步到配置文件中。。。

---

概念

• buddler

表明被打包事後的文件

入口(entry)

入口起點 --> 入口文件以來的模塊和庫 --> 處理依賴

單個/多個入口

• webpack.config.js

module.exports = {
    entry:'./src/index.js'   //字符串形式
    entry: { //對象形式，支持多個入口文件
        main: './path/to/my/entry/file.js',
        app: './src/app.js'
     }
}
複製代碼

輸出(output)

打包完畢 --> 輸出bundles(打完包的部分) --> 輸出文件命名(默認爲./dist)

單個/多個輸出

• webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), //第一個path爲當前路徑，第二個path是node裏提供的變量，需提早引入，__dirname找到當前文件(webpack.config.js)所在目錄,'dist'爲打包後輸出的文件
        filename: 'my-first-webpack.bundle.js' //輸出的單個文件名字
        filename: '[name].bundle.js' //當有多個入口文件時，就會打包成多個出口文件，name爲入口文件名
    }
}
複製代碼

• 執行webpack命令會發現dist文件中出現了my-first-webpack.bundle.js文件

加載器(loader)

用來將其餘不一樣語言的文件(如:less、sass、typescript等)轉爲js文件

• webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    module: { //loader模塊
        rules: [
          { test: /\.css$/, use: 'css-loader' }, //use爲使用什麼類型的loader處理test匹配到的文件
          { test: /\.less$/, use: ['style-loader','css-loader','less-loader']} //匹配全部的less文件，先用less-loader解析，再用css-loader解析css，以後用style-loader使文件解析爲行內樣式表，前提是這三個模塊和less都已下載安裝
        ]
     }
}
複製代碼

瞭解插件(plugins)

下載 --> require進配置文件中 --> 應用到配置數組plugins中

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝，抽離出html文件，裏面默認引入打包完的文件
const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    module: { //loader模塊
        rules: [
          { test: /\.css$/, use: 'css-loader' }, 
          { test: /\.less$/, use: ['style-loader','css-loader','less-loader']} 
        ]
     },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}
複製代碼

插件這裏只作瞭解，以後會單獨詳解插件的配置~

模式

選擇development 或 production 之中的一個，來設置 mode 參數

• webpack.config.js

const path = require('path')
module.exports = {
    entry:'./src/index.js',   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    mode: 'development'
}
複製代碼

• development

開發模式，打包以後文件爲未壓縮版本的

• production

生產模式，打包以後文件爲壓縮版本的，缺點在開發中保存都會在第一行，對開發人員不友好