webpack學習筆記(一)

常見的loaders

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

  用法：

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

經常使用的plugins

• CommonsChunkPlugin:將chunks相同的模塊代碼提取成公共js
• CleanWebpackPlugin:清理構建目錄
• ExtractTextWebpackPlugin:將css從bundle文件裏提取成一個獨立的css文件
• CopyWebpackPlugin:將文件或者文件拷貝到構建的輸出目錄
• HtmlWebpackPlugin:建立html文件去承載輸出的bundle(多頁面打包時使用)
• UglifyjsWebpackPlugin:壓縮js
• ZipWebpaackPlugin:將打包出的資源生成一個zip包

  用法：

  const path = require('path');
  module.exports = {
      output: {
          filename:'bundle.js'
      },
      plugins:[
          new HtmlWebpackPlugin({
              template:'./src/index.html'
          })
      ]
  }
  複製代碼

mode構建環境

• production:設置process.env.NODE_ENV的值爲production,默認開啓一些插件FlagDependencyUsagePlugin,FlagIncludeChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
• development：設置process.env.NODE_ENV的值爲development,開啓NamedChunksPlugin和NamedModulesPlugin
• none:不開啓任何插件

添加es6解析

解析es6的語法須要babel-loader,而babel-loader依賴於babel,因此須要創建babel的配置文件.babelrc

{
    "presets":[],//presets爲一系列babel plugins的集合
    "plugins":[] //一個plugin對應一個功能
}
複製代碼

• 一、安裝npm i @babel/core @babel/preset-env babel-loader -D

-D:--save dev

• 二、建立.babelrc文件，添加presets

  {
      "presets":[
          "@babel/preset-env" //es6的babel preset配置
      ]
  }
  複製代碼

• 三、在webpack.config.js中添加babel-loader,只校驗js就能夠

  module.exports = {
      entry:{...},
      output:{...},
      mode:"production",
      module:{
          rules:[
              {test:/\.js$/,use:'babel-loader'}
          ]
      }
  
  }
  複製代碼

• 四、npm run build

添加react jsx解析

• 一、安裝插件 npm i react react-dom @babel/preset-react -D
• 二、添加presets

{
    presets:[
        "@babel/preset-react"
    ]
}
複製代碼

• 三、編寫測試代碼

  'use strict'
    import React from 'react';
    import ReactDom from 'react-dom';
  
    class Search extends React.Component {
        render(){
            return <div>Search Test</div>
        }
    }
  
    ReactDom.render(
        <Search/>,
        document.getElementById('root')
    )
  複製代碼

添加html模板解析

添加插件html-webpack-plugin，自動解析模板，不用每次去建立html

• 一、安裝 npm i html-webpack-plugin -D
• 二、在webpack.config.js中引用 const HtmlWebpackPlugin = require('html-webpack-plugin')
• 三、添加模板

  'use strict'
    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        entry:{...},
        output:{...},
        module:{rules:[...]},
        plugins:[
            new HtmlWebpackPlugin({
                template:'./public/index.html' //模板
            })
        ]
    }
  複製代碼

  github源碼：github.com/logmei/webp…