瞭解webpack-4.0版本（一）

JOKER_發表於2018-03-17
Web

介紹

近期釋出了 webpack 4.0.0 的 beta 版本,如果想了解和之前版本的區別，不妨先自己搭建一個webpack的簡單應用體驗一下。

1.簡單案例

安裝 npm i webpack --webpack-cli -D

1.1 為了使用命令列進行打包，需要在package.json中配置

"scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --open --mode development"
  },
複製程式碼

1.2 webpack.config.js配置

瞭解webpack-4.0版本（一）

let path = require('path');
module.exports = {
    entry: './src/index.js',//入口配置
    output:{
      path:path.join(__dirname,'dist'),//只能寫絕對路徑，輸出資料夾
      filename:'bundle.js'//輸出檔名
    },  
    module:{
       
    },
    plugins:[

    ]
}
複製程式碼

執行 npx webpack 或者 npm run build壓縮 src資料夾下的index.js

1.3 對打包後的js解讀

  • 在bundle.js中，生成一個字執行函式，把要打包的js定義為實參，傳入到自執行函式當中。
  • 首先會先構建模組的快取，目的是為了提高模組的載入速度，下次直接從快取中取

1.4 使用http服務自動訪問專案

  • 在dist資料夾下建立index.html檔案 引入bundle.js
  • 在src目錄下建立index.css 並在index.js中引入index.css
require('./index.css');
複製程式碼
  • 執行npm install style-loader css-loader並在webpack-config.js 中配置loader
      rules:[
        {
          test:/\.css$/,
          loader:["style-loader","css-loader"]
        }
      ]
   },
複製程式碼
  • 執行 npm install webpack-dev-server -D
  • 在package.json中 配置 "dev": "webpack-dev-server --open --mode development",在配置--open 後，最後執行npm run dev會自動啟動服務開啟預覽。
  • 在webpack.config.js配置靜態檔案伺服器，可以預覽打包後的專案
 devServer:{
       contentBase:'./dist',//靜態檔案跟目錄
       host:'localhost',//配置主機
       port:8080,//主機名
       compress:true//伺服器返回給瀏覽器是否使用gzip壓縮
    }
複製程式碼
  • npm run dev成功啟動專案

webpack-dev-server是一個小型的Node.jsExpress伺服器,它使用webpack-dev-middleware來服務於webpack的包，我們可以看到產出的檔案(bundle.js)，但是webpack-dev-server打包的檔案會放到記憶體中，不可見。

1.5 使用動態模板產出專案

  • npm i html-webpack-plugin -D 根據模板生成一個html檔案
  • 配置webpack-config.js
 output:{
      path:path.join(__dirname,'dist'),//只能寫絕對路徑
      filename: '[name].[hash].js'//打包後的檔名
    },  
複製程式碼

輸出檔名，改為變數加上雜湊值，避免頁面引入js有快取的情況

const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
      new HtmlWebpackPlugin({
          template: './src/index.html',
          filename: 'index.html',
          title: 'hello world!'
      }),
    ],
複製程式碼

src下建立index.html 模板檔案，並且配置引數。

<!DOCTYPE html>
<html lang="en">E:\韓佳駿\FF\test\webpack\dist\index.html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
複製程式碼
  • npm run build dist目錄下會自動生成打包後的檔案，插入js和傳入的title屬性

1.6 多入口配置

首先為了每次build後dist下的目錄重新打包，方便檢視，我們使用

npm i clean-webpack-plugin -D
複製程式碼

引入webpack.config.js中

const CleanWebpackPlugin = require('clean-webpack-plugin');
 plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
   ...
  ],

複製程式碼

如果我們多個頁面，並且每個頁面引入的模組不相同，該如何配置?

 entry: {
     index:'./src/index.js',
     base:'./src/base.js'
  },
複製程式碼

entry 中配置的key相當於每一個程式碼塊chunk,配置多個頁面時，每個頁面配置需要的模組

 plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定產的HTML模板
      filename: 'index.html',
      title: 'hello index!',
      chunks:['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',//指定產的HTML模板
      filename: 'base.html',
      title: 'hello base!',
      chunks: ['base']
    }),
  ],
複製程式碼

假如我們需要引入一個公共模組common.js,比如是jquery，我們還要其他模組內部引用jquery，這時 $這個變數被封裝在模組內部，其他模組無法拿到jquery物件$，這時需要在plugin中使用一個模組

 plugins: [
      //用來自動向模組內部注入變數
      new webpack.ProvidePlugin({
          $: 'jquery'
       }),...
複製程式碼

假如我們想把$變成全域性變數，那麼要引入expose-loader， 它會先載入此模組，然後得到模組的匯出物件，並且掛載到window

寫法：
expose-loader?全域性變數名:模組名
let $ = require('expose-loader?$!jquery');
複製程式碼

或者

 rules: [
       {
        test: require.resolve('jquery'),
        use: {
          loader: 'expose-loader',
           options: '$'
         }
       },
複製程式碼

1.7 多個頁面配置

let pages = ['index', 'base'];
pages = pages.map(page => new HtmlWebpackPlugin({
  template: './src/index.html',//指定產的HTML模板
  filename: `${page}.html`,//產出的HTML檔名
  title: `${page}`,
  chunks: [`${page}`],//在產出的HTML檔案裡引入哪些程式碼塊
  hash: true,// 會在引入的js里加入查詢字串避免快取,
  minify: {
    removeAttributeQuotes: true
  }
}))
//....
 plugins:[
 //....
 
 ...pages
 ]
複製程式碼

1.8 處理圖片

在entry 入口配置為main.js,src資料夾下建立images目錄放入一張圖片

let src = require('./images/timg.jpg');
let img = new Image();
img.src = src;
document.body.appendChild(img);
複製程式碼
npm i file-loader url-loader -D
複製程式碼
{
           //file-loader是解析圖片地址，把圖片從源位置拷貝到目標位置並且修改原引用地址
           //url-loader可以在檔案比較小的時候，直接變成base64字串內嵌到頁面中
           test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)/,
           loader: {
               loader: 'url-loader',
               options: {
                   limit: 5 * 1024,
                   //指定拷貝檔案的輸出目錄
                   outputPath: 'images/'
               }
           }
       },
複製程式碼

npm run build 之後順利在dist 目錄下生成一個images檔案。瀏覽器也順利訪問這張圖片。

1.9 使用副檔名

 resolve: {
        //引入模組的時候，可以不用副檔名 
        extensions: [".js", ".less", ".json"],
        alias: {//別名
            "bootstrap": "bootstrap/dist/css/bootstrap.css"
        }
複製程式碼

相關文章