webpack基礎配置

1. 搭建 webpack 基本環境

1.1 webpack

webpack是 是一個現代 JavaScript應用程序的靜態模塊打包工具，能夠分析你的項目依賴的模塊以及一些瀏覽器不能直接運行的拓展語言(Scss，TypeScript等），並生成一個或多個 bundle，將其打包爲合適的格式以供瀏覽器使用.

1.2 初始化項目

npm init -y

1.3 安裝webpack

• 安裝node

是否安裝成功
    node -v
    npm -v
複製代碼

• 安裝nrm

//當使用官方npm源安裝各類包比較慢的時候，建議下載nrm（npm源管理器）快速切換不一樣npm源地址。
    npm install nrm -g
    //查看可選的源
    nrm ls
    //建議切換到淘寶鏡像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    nrm use taobao
    //添加公司私有npm源,registry是npm源名 url是源的地址
    nrm add  <registry> <url> 
    //刪除
    nrm del <registry>
複製代碼

• 安裝webpack

//不建議全局安裝，這樣每一個項目能夠根據需求安裝不一樣的webpack
    //webpack-cli是webpack的命令行，webpack4.0版本以上，把webpack和webpack-cli分離開了，安裝了webpack-cli才能運行webpack相關的命令
    cnpm install webpack webpack-cli -g
    webpack -v
    //本地安裝並判斷是否安裝成功
    cnpm install webpack webpack-cli -D
    npx webpack -v
複製代碼

1.3 webpack 打包構建項目

• project

webpack-demo
      |- package.json
      |- package-lock.json
      |- webpack.config.js
      |- postcss.config.js
    + |- /src
    +   |- css
    +   |- js
    +   |- images
    +   |- index.js
    +   |- index.html
    + |- /dist
    +   |- bundle.js
    +   |- index.html
    +   |- images
複製代碼

• npm指定入口和出口文件路徑（不建議）

//webpack會默認把index.js打包到./dist/main.js
    npx webpack  ./src/index.js --mode development  
    //指定入口文件和出口文件路徑
    npx webpack  ./src/index.js  -o ./dist/bundle.js  --mode development
複製代碼

• 在項目文件下建立webpack.config.js文件，指定入口文件和出口文件的路徑

var path = require('path')
    module.exports = {
      mode: 'production', //兩種模式，開發模式和生產模式(會把出口文件壓縮)
      entry: './src/index.js', //入口文件
      output: {
        path: path.resolve(__dirname, './dist'), //出口文件
        //path: path.jion(_dirname, './dist')
        filename: 'bundle.js'
      }
    }
複製代碼

在npm運行npx webpack進行打包構建

2. webpack基礎配置

2.1 loaders

webpack默認只能打包處理JS類型文件，若是要處理非js類型文件，如後綴爲.css/.less/.scss/.png/.vue等的文件，須要手動安裝第三方loader加載器來預處理文件

2.1.1 加載css文件

• 安裝

npm i style-loader css-loader -D
複製代碼

• 在webpack.config.js文件中

module: {
    rules: [
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'] 
        //加載規則，從上到下，從右到左
        //css-loader會把多個css文件合成一段css，style-loader會把這段css掛載在內存html頁面的header元素上
      }
    ]
}
複製代碼

2.1.2 加載less文件

• 安裝

npm  i less less-loader -D
複製代碼

• 在webpack.config.js文件中

module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
}
複製代碼

2.1.3 加載scss文件

• 安裝

npm i sass-loader  -D
//建議用cnpm下載sass-loader，npm基本下載不來。
//若npm下載了依賴包，後期報錯顯示沒有，需從新下載,可能使用npm和cnpm命令起來衝突。
//須要把node_modules文件刪除，在npm上cnpm i 重裝
cnpm i sass-loader  -D
複製代碼

• 在webpack.config.js文件中

module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
}
複製代碼

2.1.4 自動添加css3前綴

• 安裝

npm i postcss-loader -D
npm i autoprefixer -D
複製代碼

• 在項目根目錄下新建postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
複製代碼

• 在webpack.config.js文件中

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          {
            loader: 'css-loader', 
            options: {
              importLoaders: 2, //若是sass文件裏還引入了另一個sass文件，另外一個文件還會從最後一個loader向上解析。若是不加，就直接從css-loader開始解析。// 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
              modules: true//開啓css的模塊打包。css樣式不會和其餘模塊發生耦合和衝突
            }
          },
          'postcss-loader',//配置在css-loader後，在sass|less|stylus-loader 以前
          'sass-loader'
        ]
      },
    ]
}
複製代碼

2.1.5 加載圖片、字體、媒體文件

• 安裝

//url-loader 功能與 file-loader相似，只是有文件大小的限制。若是文件小於限制的大小，則會返回 base64 編碼。
npm i url-loader -D
複製代碼

• 在webpack.config.js文件中

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
              limit: 32000
            }
          }
        ]
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: ['url-loader']
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
              limit: 32000
            }
          }
        ]
      }
    ]
}
複製代碼

2.2 plugins

能夠在webpack運行到某個時刻的時候，幫你作一些事情

2.2.1 html-webpack-plugin：在打包結束後，在dist目錄中自動生成一個html文件，並把打包生成的js自動引入到這個html文件中

• 安裝

npm i html-webpack-plugin -D
複製代碼

• 在webpack.config.js中

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    // path: path.jion(_dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [ //插件配置的節點
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, './dist/index.html'),
      filename: 'index.html'
    })
  ]
}
複製代碼

2.2.2 clean-webpack-plugin:自動清除上一次打包的dist文件

• 安裝

npm i clean-webpack-plugin -D
複製代碼

• 在webpack.config.js中

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
var cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    // path: path.jion(_dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [ //插件配置的節點
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, './dist/index.html'),
      filename: 'index.html'
    }),
    new cleanWebpackPlugin()
  ]
}
複製代碼

2.3 打包多個入口文件時的配置

在webpack.config.js文件中

var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
var cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js',
    bundle: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',           //main => main.js  bundle => bundle.js
    publicPath: 'http://cdn.com.cn', //將注入到html中的js文件前面加上地址
  },
  plugins: [ //插件配置的節點
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, './dist/index.html'),
      filename: 'index.html'
    }),
    new cleanWebpackPlugin()
  ]
}
複製代碼

2.4 SourceMap:打包編譯後的文件和源文件的映射關係，用於開發者調試用

在webpack.config.js文件中

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    //devtool:'none',//在開發者模式下，默認開啓sourcemap,將其關閉
    //devtool:'source-map'//開啓映射打包會變慢,同時生成.map文件
    //devtool:'inline-source-map'//不單獨生成.map文件，會將生成的映射文件以base64的形式插入到打包後的js文件的底部
    //devtool:'cheap-inline-source-map'//代碼出錯提示不用精確顯示第幾行的第幾個字符出錯，只顯示第幾行出錯，會提升一些性能
    //devtool:'cheap-module-inline-source-map'//不只管本身的業務代碼出錯，也管第三方模塊和loader的一些報錯
    //devtool:'eval'//執行效率最快，性能最好，可是針對比較複雜的代碼的狀況下，提示內容不全面
    //devtool: 'cheap-module-eval-source-map',//在開發環境推薦使用，提示比較全，打包速度比較快
    //devtool: 'cheap-module-source-map',//在生產環境中推薦使用，提示效果會好一些
}
複製代碼

2.3 webapck-dev-server:實現自動打包編譯功能（將dist文件託管到內存中）,並開啓熱更新功能

• 安裝

npm i webpack-dev-server -D
複製代碼

• 方法一

//1.在package.json文件
//因爲webpack-dev-server是本地安裝，沒法做爲腳本命令，在powershell終端運行（只有全局-g安裝才能夠）,須要在package.json的scripts中配置要運行時的一些命令
"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase dist --hot" 
  },
//3.在npm運行`npm run dev`就能夠進行自動打包編譯
複製代碼

• 方法二

//1.在package.json文件
"scripts": {
    "dev": "webpack-dev-server" 
  },
//2.在webpack.config.js文件中
var webpack = require('webpack')
module.exports = {
    plugins: [  //配置插件的節點
        new webpack.HotModuleReplacementPlugin() //開啓熱更新
    ],
    devServer: {
        open: true, //自動打開瀏覽器
        port: 3000, //開發服務器監聽的端口
        contentBase: './dist', //:配置開發服務運行時的文件根目錄
        hot: true,   //開啓熱更新
        hotOnly: true
    }
}
//3.在npm運行`npm run dev`就能夠進行自動打包編譯
複製代碼

• 方法三

//1.在webpack.config.js文件中
var webpack = require('webpack')
module.exports = {
    plugins: [  //配置插件的節點
        new webpack.HotModuleReplacementPlugin() //開啓熱更新
    ],
    devServer: {
        open: true, //自動打開瀏覽器
        port: 3000, //開發服務器監聽的端口
        contentBase: './dist', //:配置開發服務運行時的文件根目錄
        hot: true,   //開啓熱更新
        hotOnly: true
    }
}
//3.在npm運行`npx webpack-dev-server`就能夠進行自動打包編譯
//npm 從5.2版開始，增長了npx命令,使用已安裝本地的工具，而不須要在package.json配置 scripts
複製代碼

• 在index.js中

//若是模塊啓用了HMR，就能夠用 module.hot.accept(),監聽模塊的更新。
if (module.hot) {
  module.hot.accept('./library.js', function() {
    // 使用更新過的 library 模塊執行某些操做...
  })
}
複製代碼

2.4 babel: 將ES6/7/8 轉 ES5代碼

2.4.1 主要處理業務代碼

• 安裝

npm i babel-loader @babel/core -D 
npm i @babel/preset-env  -D
ES6/7/8語法轉換爲ES5語法，可是對新api並不會轉換,能夠經過 core-js@3進行轉換
npm install core-js@3
複製代碼

• 在webpack.config.js文件中

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
        presets: [
          [
            "@babel/preset-env", 
            {
            useBuiltIns: "usage" //按需添加core-js@3,把用到的代碼都轉成低版本瀏覽器兼容的
            corejs: 3,
            }
          ]
        ]
      }
    }
  ]
}
複製代碼

• index.js文件中

import "core-js/stable"
import "regenerator-runtime/runtime"
複製代碼

2.4.2 開發類庫，第三方模塊或組件庫，使用transform-runtime能避免聲明的變量變成全局變量，且會污染全局環境

• 安裝

cnpm i @babel/plugin-transform-runtime @babel/runtime -D
cnpm i @babel/runtime-corejs3 -D
複製代碼

• 在webpack.config.js文件中

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    "plugins": [
      [
        "@babel/plugin-transform-runtime",
        {
          "corejs": 3,
          "helpers": true,
          "regenerator": true,
          "useESModules": false
        }
      ]
    ]
  }
}
複製代碼