webpack基礎知識

1、基礎

1 安裝

npm i -g webpack webpack-cli

// 推薦安裝至本地
npm i -D webpack webpack-cli

2 webpck基礎使用

2.1 webpack-cli

Npm 5.2以上的版本中提供了一個npx命令

npx想要解決的主要問題、就是調用項目內部安裝的模塊、即就是在node_modules下的.bin目錄中找到對應的命令執行

使用webpack命令: npx webpack

Webpack4.0以後能夠實現0配置打包構建、0配置的特色就是限制較多、沒法自定義不少配置

開發過程當中仍是使用webpack配置進行打包構建

2.2 webpack配置

Webpack 四大核心概念

• 入口entry — 程序的入口js
• 輸出 output — 打包後存放的位置
• 加載器loader — 用於對模塊的源代碼進行轉換
• 插件plugins — 解決loader沒法解決的問題

基本配置

1. 配置 webpack.comfig.js
2. 運行 npx webpack

// 運行默認webpack.config.js文件 
npx webpack
npx webpack webpack.config.js

// 運行自定義配置文件
npx webpack --config webpack.custom.config.js

//package.json 配置
"dev": "webpack --config webpack.custom.config.js",
"dev1": "npx webpack --config webpack.custom.config.js", // npx 可省略、會自動在node_modules裏面找
"dev2": "webpack"

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  mode: 'development'
}

2.3 自動編譯工具配置

每次要編譯代碼時，須要運行npm run dev比較煩，webpack提供了幾個選項、能夠自動編譯

1. webpack watch mode
2. webpack-dev-server
3. webpack-dev-middleware

多數場景中、推薦使用webpack-dev-server

2.3.1 watch

在webpack指令後面加上--watch參數便可

主要的做用就是監視本地項目文件的變化、發現有修改的代碼就會自動編譯打包、生成輸出文件

• 經過cli的方式設置watch參數

1. 配置package.json

   "watch": "webpack --watch"

2. 運行 npm run watch

• 經過配置文件對watch的參數進行修改

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  // 開啓監視模式、此時執行webpack指令進行打包會監視文件變化自動打包
  watch: true
}

2.3.2webpack-dev-server (重點)

• 簡單配置

1. 安裝devServer

   安裝devServer須要依賴webpack、必須在項目依賴中安裝webpack

   npm i -D webpack-dev-server

2. index.html中

   <script src='/bundle.js'></script>

3. 運行

   npx webpack-dev-server

4. 運行

   npx webpack-dev-server --hot --open --port 9527

5. 配置package.json

   "dev": "webpack-dev-server  --contentBase src --compress --hot --open --port 9527"
   
   // --contentBase src 是以src爲根目錄， 不然以項目爲根目錄
   // --open 自動打開
   // --port 端口號
   // --hot 熱模塊更新
   // --compress 利用express開啓gzip壓縮

6. 運行

   npm run dev

devServer 會在內存中生成一個大包好的bundle.js， 專供開發時使用，打包效率高，修改代碼後會自動打包從新打包以及刷新瀏覽器

• 修改webpack.config.js

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename:'bundle.js'
  },
  // 將cli中的參數 在配置文件中進行配置
  devServer:{
    hot:true,
    open: true,
    port:9527,
    compress: true,
    contentBase:'./src'
  }
}

2.3.3 html插件

1. 安裝 html-webpack-plugin 插件

   npm i -D html-webpack-plugin

2. 在 webpack.config.js 中 plugins 節點下配置

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   plugins:[
    new HtmlWebpackplugin({
        filename: 'index.html', // 生產的文件名稱
        template: './src/index.html' // 將此目錄下的文件做爲模板生成一個新的html、放置在根目錄的內存中
    })
   ]

   1. devServer時、根據模板在express項目根目錄下生成html文件、相似於devServer生成內存中的bundle.js
   2. devServer時、自動引入 bundle.js
   3. 打包時會自動生成index.html

2.3.4 webpack-dev-middleware

webpack-dev-middleware 是一個容器(wrapper)、它能夠把webpack處理後的文件傳遞給一個服務器(server)、webpack-dev-server 在內部使用了它、同時、它能夠做爲一個單獨的包來使用、以便進行更多自定義設置來實現更多的需求

1. 安裝express 和 webpack-dev-middleware

   npm i -D express webpack-dev-middleware

2. 新建 server.js

   const express = require('express')
   const webpack = require('webpack')
   const webpackDevMiddleware = require('webpack-dev-middleware')
   const config = require('./webpack.config')
   
   const app = express()
   const compiler = webpack(config)
   
   app.use(webpackDevMiddleware(compiler, {
     publicPath:'/'
   }))
   
   app.listen(3333, function () {
     console.log('port:3333');
   })

   若是要使用middleware、必須使用html-webpack-plugin插件、不然html文件沒法正確的輸出到express服務器的根目錄

2.3.5 總結

只有在開發時才須要使用自動編譯工具

項目上線時都會直接使用webpack進行打包構建、不須要使用這些自動編譯工具

自動編譯工具只是爲了提升開發體驗

2.4處理CSS

1. 安裝 css-loader style-loader

   npm i -D css-loader style-loader

2. 配置web pack

   module:{
    rules:[
        // 配置的是用來解析.css文件的loader，css-loader、style-loader
        // css-loader -- 解析css文件
        // style-loader -- 將解析出來的結果 放到html中 使其生效
        {
            test:/\.css$/,
            use:['style-loader', 'css-loader'] // webpack底層調用這些loader的順序是從右向左
        }
    ]
   }

2.5 處理less和scss

1. 安裝

   npm i -D less less-loader sass-loader node-sass

2. 配置less

   {
    test:/\.less$/,
    use:['style-loader', 'css-loader', 'less-loader']
   }

3. 配置sass

   {
    test:/\.scss$/,
    use:['style-loader', 'css-loader', 'sass-loader']
   }

2.6處理圖片和字體

1. 下載、url-loader 封裝了 file-loader

   npm i -D file-loader url-loader

2. 配置

   1. 配置 filte-loader

   { // 處理圖片
     test: /\.(png|jpg|gif)$/,
     use: 'file-loader'
   },
   { // 處理字體圖標文件
     test: /\.(woff|woff2|eot|svg|ttf)$/,
     use: 'file-loader'
   },

   1. 配置url-loader

   {
    test:/\.(png|jpg|gif)$/,
    use:{
        loader: 'url-loader',
        options: {
            // limit 表示若圖片的大於5KB、就以路徑的形式展現、小於的話就用base64格式展現
            limit: 5 * 1024,
         outputPath:'images', // 圖片生成的文件夾名稱
         name:'[name]-[hash:6].[ext]' // 生成的圖片名稱
        }
    }
    //use 也能夠寫成數組
    use:[{
       loader:'url-loader',
       options:{
        limit: 12 * 1024
       }
     }]
   }

2.7 babel

1. 安裝

   npm i -D babel-loader @babel/core @babel/preset-env

2. 若是須要支持更高級別的es6語法、能夠繼續安裝插件、在官網找對應的插件安裝

   npm i -D @babel/plugin-proposal-class-properties

3. 配置

   {
    test: /\.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/env'],
            plugins: ['@babel/plugin-proposal-class-properties']
        }
    },
    exclude: /node_modules/,
    include: path.resolve(__dirname, '../src')
   }

官方更加建議使用 .babelrc 配置

{
 "presets": ["@babel/env"],
 "plugins": ["@babel/plugin-proposal-class-properties"]
}

3.1 若是須要使用 genetator，沒法直接使用 babel 進行轉換，由於會將 generator 轉換爲一個 regeneratorRuntime， 而後使用 mark 和 wrap 來實現 generator

• 安裝插件

  npm i -D @babel/plugin-transform-runtime 
  npm i -S @babel/runtime

• 配置中、修改 plugins

  plugins: [
   '@babel/plugin-proposal-class-properties',
   '@babel/plugin-transform-runtime'
  ]

3.2 若是須要使用 ES6/7 中對象原型提供的新方法，babel 默認狀況沒法轉換，即便用了 plugin-transform-runtime 的插件也不支持轉換原型上的方法，須要使用 polyfill

• 安裝

  npm i -S @babel/polyfill

• 在須要使用該模塊的地方直接引入

  import '@babel/polyfill'

2.8 插件

2.8.1 clean-webpack-plugin

該插件能夠用於自動清除dist目錄後從新生成，在 npm run build 的時候很是有用

1. 安裝插件

   npm i -D clean-webpack-plugin

2. 引入插件

   const {CleanWebpackPlugin} = require('clean-webpack-plugin')

3. 配置插件

   plugins:[
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html'
     }),
     new CleanWebpackPlugin()
   ],

2.8.2 copy-webpack-plugin

1. 安裝

   npm i -D copy-webpack-plugin

2. 引入插件

   const CopyPlugin = require('copy-webpack-plugin');

3. 配置插件

   from:源、從哪裏拷貝，能夠是絕對路徑或者絕對路徑，推薦絕對路徑

   to:目標、拷貝到哪裏去，相對於output的路徑，一樣能夠是相對路徑或者絕對路徑，更推薦相對路徑、直接相對於dist目錄便可

   plugins:[
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyPlugin([
       { 
         from: path.join(__dirname, 'static'),
         to: 'static'
       }
     ])
   ],

2.8.3 BannerPlugin

是一個webpack內置插件、用於給打包的js文件加上版權註釋信息

1. 引入webpack插件

   const webpack = require('webpack')

2. 配置

   plugins:[
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyPlugin([
       { 
         from: path.join(__dirname, 'static'),
         to: 'static'
       }
     ]),
     new webpack.BannerPlugin('王耀的版權信息')
   ],

• 必懂的webpack高級配置
• 必懂的wenpack優化