webpack4之基礎篇

1. 什麼是webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。

2. webpack核心概念

1. Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
2. Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出全部依賴的模塊。
3. Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。 Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
4. Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。
5. Output：輸出結果，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果。

3. webpack執行流程

webpack啓動後會在entry裏配置的module開始遞歸解析entry所依賴的全部module，沒找到一個module, 就會根據配置的loader去找相應的轉換規則，對module進行轉換後在解析當前module所依賴的module，這些模塊會以entry爲分組，一個entry和全部相依賴的module也就是一個chunk，最後webpack會把全部chunk轉換成文件輸出，在整個流程中webpack會在恰當的時機執行plugin的邏輯

4. 開始從零配置webpack

1. 初始化配置

mkdir webpack-start
cd webpack-start
npm init
複製代碼

2. 配置webpack

yarn add webpack webpack-cli -D //webpack4把webpack拆分了
mkdir src   cd src而且建立index.html, index.js
mkdir dist
touch webpack.config.js
複製代碼

webpack.config.js

module.exports = {
    entry: './src/index.js', //入口文件，src下的index.js
    output: {
        path: path.join(__dirname, 'dist'), // 出口目錄，dist文件
        filename: '[name].[hash].js' //這裏name就是打包出來的文件名，由於是單入口，就是main，多入口下回分解
    },
    module: {},
    plugin: {},
    devServer: {}
}
複製代碼

3. 配置開發服務器

yarn add webpack-dev-server -D
修改webpack.config.js
devServer: {
    contentBase: path.join(__dirname, "dist"), //靜態文件根目錄
    port: 9090, // 端口
    host: 'localhost',
    overlay: true,
    compress: true // 服務器返回瀏覽器的時候是否啓動gzip壓縮
}
修改package.json
"script": {
    "build": "webpack --mode development", //這裏爲了避免壓縮代碼，用開發環境
    "dev": "webpack-dev-server --open --mode development"
}
複製代碼

4. 支持css文件

yarn add style-loader css-loader -D
// css-loader用來處理css中url的路徑
// style-loader能夠把css文件變成style標籤插入head中
// 多個loader是有順序要求的，從右往左寫，由於轉換的時候是從右往左轉換的
module: {
    rules: {
        test: /\.css$/,
        use: ['style-laoder', 'css-loader'],
        include: path.join(__dirname, 'src'), //限制範圍，提升打包速度
        exclude: /node_modules/
    }
}
複製代碼

5. 支持es6，react.js等

yarn add babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-preset -react -D
  {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      query: {
        presets: ['env', 'stage-0', 'react'] // env轉換es6 stage-0轉es7 react轉react
      }
    }
  }
  同時能夠把babel配置寫到.babelrc中
複製代碼

6. 從js中分離css

yarn add extract-text-webpack-plugin -D
{
    test: /\.css$/, // 轉換文件的匹配正則
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      //若是須要，能夠在 sass-loader 以前將 resolve-url-loader 連接進來
      use: ['css-loader']
    })
},
//加上plugin
plugins: [
    new ExtractTextWebpackPlugin({
      filename: 'css/[name].[hash].css' //放到dist/css/下
    })
]
複製代碼

7. 支持圖片

yarn add file-loader url-loader -D
file-loader 解決css等文件中引入圖片路徑的問題
url-loader 當圖片較小的時候會把圖片BASE64編碼，大於limit參數的時候仍是使用file-loader 進行拷貝
{
// file-loader是解析圖片地址，把圖片從源文件拷貝到目標文件而且修改源文件名字
// 能夠處理任意二進制，bootstrap裏的字體
// url-loader能夠在文件比較小的時候，直接變成base64字符串內嵌到頁面中
{
    test: /\.(png|jpg|jpeg|gif|svg)/,
    use: {
      loader: 'url-loader',
      options: {
        outputPath: 'images/', // 圖片輸出的路徑
        limit: 5 * 1024
      }
    }
},
// 同時要處理打包圖片路徑問題，
output: {
    publicPath: '/'
}
複製代碼

8. 處理css3屬性前綴

yarn add postcss-loader -D
{
    test: /\.css$/, // 轉換文件的匹配正則
    // css-loader用來處理css中url的路徑
    // style-loader能夠把css文件變成style標籤插入head中
    // 多個loader是有順序要求的，從右往左寫，由於轉換的時候是從右往左轉換的
    // 此插件先用css-loader處理一下css文件
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      //若是須要，能夠在 sass-loader 以前將 resolve-url-loader 連接進來
      use: ['css-loader', 'postcss-loader']
    })
},
創建.postcssrc.js文件
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      "browsers": [
        "ie >= 9",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 7",
        "opera >= 23"
      ]
    }
  }
}
複製代碼

9. 調試打包的代碼 webapck經過配置能夠自動給咱們source maps文件，map文件是一種對應編譯文件和源文件的方法

devtool: 'eval-source-map'

1. source-map 把映射文件生成到單獨的文件，最完整最慢
2. cheap-module-source-map 在一個單獨的文件中產生一個不帶列映射的Map
3. eval-source-map 使用eval打包源文件模塊,在同一個文件中生成完整sourcemap
4. cheap-module-eval-source-map sourcemap和打包後的JS同行顯示，沒有映射列
複製代碼

10. 壓縮js

webpack --mode production 會壓縮，能夠忽略下面
yarn add uglifyjs-webpack-plugin -D
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
new UglifyjsWebpackPlugin(),
複製代碼

11. 壓縮css

webpack --mode production 會壓縮，能夠忽略下面
{
    test: /\.css$/, // 轉換文件的匹配正則
    use: ExtractTextWebpackPlugin.extract({
      fallback: 'style-loader',
      use: [
          {
             loader: 'css-laoder',
             options: {minimize: true}
          },
          'postcss-loader'
      ]
    })
},
複製代碼

12. 清空打包輸出目錄

yarn add clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
複製代碼

13. 區分環境變量 許多 library 將經過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容。咱們可使用 webpack 內置的 DefinePlugin 爲全部的依賴定義這個變量：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --mode development", // 設置NODE_ENV爲production
    "dev": "webpack-dev-server --open --mode development "
},
new webpack.DefinePlugin({
    NODE_ENV:JSON.stringify(process.env.NODE_ENV)
})
在全局都有NODE_ENV這個變量,當yarn run build,時，NODE_ENV = 'production'
複製代碼

14. 暴露全局變量

new Webpack.ProvidePlugin({
  '$': 'jquery'
}),
複製代碼

15. resolve解析

xtension: 指定extension以後能夠不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配
resolve: {
    //自動補全後綴，注意第一個必須是空字符串,後綴必定以點開頭
    extension: ['', '.js', '.json', '.css']
}
alias: 配置別名能夠加快webpack查找模塊的速度
resolve: {
    alias: {
        'bootstrap': 'bootstrap/dist/css/bootstrap.css'
    }
}
複製代碼

16. 複製靜態資源

yarn add copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, 'static'),
    to: path.resolve(__dirname, 'pages/static'),
    ignore: ['.*']
  }
])
複製代碼

---

基礎就是這些吧，代碼優化，提升打包速度，多頁配置，我們下回分解，詳見webpack高級配置