webpack 基礎

時間  2019-11-17
標籤 webpack 基礎 简体版
原文   原文鏈接

1. 什麼是webpack

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

2. webpack核心概念

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

3. 開始從零配置webpack

  1. 初始化配置html

    mkdir webpack-start cd webpack-start npm initvue

  2. 配置webpacknode

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

webpack.config.jsjquery

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: {}
}
複製代碼

  1. 配置開發服務器webpack

    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" }css3

  2. 支持css文件git

    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/ } }es6

  3. 支持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中

  4. 從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/下 }) ]

  5. 支持圖片

    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: '/' }

  6. 處理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" ] } } }

  7. 調試打包的代碼 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同行顯示，沒有映射列
複製代碼

  1. 壓縮js

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

  2. 壓縮css

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

  3. 清空打包輸出目錄

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

  4. 區分環境變量 許多 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'

  5. 暴露全局變量

    new Webpack.ProvidePlugin({ '$': 'jquery' }),

  6. resolve解析

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

Tree Shaking

  1. css Tree Shaking

    yarn add purify-css purifycss-webpack -D const glob = require('glob') const PurifyCSSPlugin = require('purifycss-webpack') // 去除無用的css plugins: [ new PurifyCSSPlugin({ // 路勁掃描 nodejs內置 路勁檢查 paths: glob.sync(path.join(__dirname, 'pages//.html')) }) ]

  2. js優化

    yarn add webpack-parallel-uglify-plugin -D const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') plugins: [ new WebpackParallelUglifyPlugin({ uglifyJS: { output: { beautify: false, //不須要格式化 comments: false //不保留註釋 }, compress: { warnings: false, // 在UglifyJs刪除沒有用到的代碼時不輸出警告 drop_console: true, // 刪除全部的 console 語句，能夠兼容ie瀏覽器 collapse_vars: true, // 內嵌定義了可是隻用到一次的變量 reduce_vars: true // 提取出出現屢次可是沒有定義成變量去引用的靜態值 } } }) ]

提取公共代碼

大網站有多個頁面，每一個頁面因爲採用相同技術棧和樣式代碼，會包含不少公共代碼 連接

// webpack4最新配置，能夠搜索關鍵字查查配置項
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
複製代碼

打包第三方類庫

  1. DllPlugin插件： 用於打包出一個個動態鏈接庫

  2. DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的動態鏈接庫

    在package.json中 "scripts": { "build": "webpack --mode development", "build:dll": "webpack --config webpack.dll.config.js --mode development", "dev": "webpack-dev-server --open --mode development" } 新建webpack.dll.config.js
    const path = require('path') const webpack = require('webpack')

    /**

    • 儘可能減少搜索範圍
    • target: 'dll[name]' 指定導出變量名字 */

    module.exports = { entry: { vendor: ['jquery', 'lodash'] }, output: { path: path.join(__dirname, 'static'), filename: '[name].dll.js', library: 'dll[name]' // 全局變量名，其餘模塊會今後變量上獲取裏面模塊 }, // manifest是描述文件 plugins: [ new webpack.DllPlugin({ name: 'dll[name]', path: path.join(__dirname, 'manifest.json') }) ] }

    在webpack.config.js中 plugins: [ new webpack.DllReferencePlugin({ manifest: path.join(__dirname, 'manifest.json') }) ] 執行npm run build:dll 就能夠打包第三方包了

使用happypack

HappyPack就能讓Webpack把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。 happypack

npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

  {
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增長新的HappyPack構建loader
    include: [resolve('src')],
    exclude: /node_modules/,
  }
  
  plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool
    })
]
複製代碼

顯示打包時間

yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
]
複製代碼

多頁配置

git完整代碼連接

entry: { //entry是一個字符串或者數組都是單頁，是對象則是多頁，這裏是index頁和base頁
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  }
  
  一個頁面對應一個html模板，在plugin中
  plugins: [
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
  ]
複製代碼

完整多頁配置代碼以下 git完整代碼連接

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const Webpack = require('webpack')
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')

// let cssExtract = new ExtractTextWebpackPlugin('static/css/[name].css')

module.exports = {
  entry: {
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // name是entry的名字main，hash是根據打包後的文件內容計算出來的hash值
    filename: 'static/js/[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0', 'react'] 
          }
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new ExtractTextWebpackPlugin({
      filename: 'static/css/[name].[hash].css'
    }),
    new PurifyCSSPlugin({
      // 路勁掃描 nodejs內置 路勁檢查
      paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9090,
    host: 'localhost',
    overlay: true,
    compress: true // 服務器返回瀏覽器的時候是否啓動gzip壓縮
  }
}
複製代碼

vue-cli幾個重要路徑

assetsRoot:構建輸出目錄 也就是構建後的東西都扔這裏
assetsSubDirectory:資源子目錄(static) 除了index.html，其他的js img css都分在這裏
assetsPublicPath:項目目錄 一個槓槓(/) 啥意思呢，是根目錄的意思
複製代碼

未完待續： 接下來我會基於vue-cli去重新搭建一個工程，單頁，多頁都會有哦！！！讓你看懂vue-cli，而且可以自定義開發環境！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程