webpack 從基礎到進階 2

webpack 基礎用法

核心概念 --- Entry

Entry 用來指定 webpack 的打包入口

理解依賴圖的含義

• 依賴圖的入口是 entry

• 對於非代碼好比： 圖片、字體依賴也會不斷的加入到依賴圖中

Entry 的用法

單入口： entry是一個字符串

module.exports = {
    entry: './path/to/my/entry/file.js'
}
複製代碼

多入口： entry 是一個對象

module.exports = {
    entry: {
        app: './src/app.js',
        adminApp: './src/adminApp.js'
    }
}
複製代碼

核心概念 --- output

• Oouput 用來告訴 webpack 如何將編譯後的文件輸出到磁盤

output 的用法： 單入口配置

module.exports = {
    entry:'./path/to/my/entry/file.js',
    output:{
        filename: 'bundle.js',
        path: __dirname + '/dist'
    }
}

複製代碼

output 的用法： 多入口配置

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',    ---------->  經過佔位符確保文件名稱的惟一
        path: __dirname + './dist' 
    }
}
複製代碼

核心概念 --- loaders

• webpack 開箱即用只支持js和json 兩種文件類型， 經過loaders 去支持其餘的文件類型而且把他們 轉化成有效的模塊，而且能夠把他們轉化成有效的模塊，而且能夠添加到依賴圖中
• 自己是一個函數， 接受源文件做爲參數，返回轉換的結果

經常使用的loaders

名稱	描述
babel-loader	轉換es六、es7等新特性語法
css-loader	支持.css文件的加載和解析
less-loader	將less文件轉換成 css
ts-loader	將TS轉化成 JS
file-loader	將圖片、字體等的打包
raw-loader	將文件以字符串的形式導入
thread-loader	多進程打包js和css

loaders 的用法

const path = require('path');

module.exports = {
    output: {
        filename:'bundle.js'
    },
    module: {
        rules:[
        {test:/\.txt$/,use: 'raw-loader'}  ---->  test 指定匹配規則
                                                  use  指定使用的loader名稱
        ]
    }
}
複製代碼

核心概念 --- plugins

• 插件用於 bundle 文件的優化， 資源管理和環境變量的注入
• 做用於 整個構建過程

常見的 plugins

名稱	描述
CommonsChunkPlugin	將chunk相同的模塊代碼提取成公共js
CleanWedpackPlugin	清理構建目錄
ExtractTextWebpackPlugin	將css從bunlde文件裏提取成一個獨立的css文件
CopyWebpackPlugin	將文件或者文件夾拷貝到構建的輸出目錄
HtmlWebpackPlugin	建立html文件去承載輸出的bundle
UglifyjsWebpackPlugin	壓縮js
ZIpWebpackPlugin	將打包出的資源生成一個zip包

Plugins 的用法

const path = require('path');

module.exports = {
    output:{
        filename: 'bundle.js',
    },
    plugins: [
        newHtmlWebpackPlugin({
            template: './src/index.html'   ------->  放到 plugins 的數組裏
        })
    ]
}
複製代碼

核心概念 --- mode

• Mode 用來指定當前的構建環境是： production、development、仍是 none
• 設置 mode 能夠使用 webpack 內置的函數， 默認值爲 production

Mode 的內置函數

選項	描述
development	設置 process.env.NODE_ENV 的值爲 development. 開啓 NameChunkPlugin 和 NameModulesPlugin.
production	設置 process.env.NODE_ENV 的值爲 production. 啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
none	不開啓任何優化項

資源解析： 解析 es6

• 使用 babel-loader
• babel的配置文件是: .babelrc

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    + module: {
    +     rules: [
    +         {
                  test: /\.js$/,
                  use: 'babel-loader'
              }
          ]    
    }
}

複製代碼

資源解析： 增長es6的 babel preset 配置

{
    'presets':[
    + "@babel/preset-env"   ------->   增長es6的 babel preset 配置
    ],
    "plugins": [
      "@babel/proposal-class-properies"
    ]
}
複製代碼

資源解析： 解析 React JSX

{
    'presets':[
      "@babel/preset-env",   
    + "@babel/preset-react"   ------->   增長react的 babel preset 配置
    ],
    "plugins": [
      "@babel/proposal-class-properies"
    ]
}
複製代碼

後序，webpack 從基礎到進階 3