webpack介紹和安裝

webpack：前端模塊化打包工具

安裝webpack需要安裝Node.js，Node.js自帶軟體包管理工具npm

查看自己的node版本：

node -v

全域安裝webpack

cnpm install webpack -g

查看webpack版本

webpack --version

區域安裝webpack

cnpm install webpack --save-dev

為什么全域安裝之后還需要區域安裝？

在終端直接執行webpack，使用的是全域webpack

如果在package.json中定義了script，其中包含了webpack命令，那么使用的是區域webpack

webpack基本使用程序

小案例：創建一個webpack目錄，在里面創建dist目錄和src目錄

在src目錄中創建mathUtils.js和main.js

mathUtils.js

function add(num1, num2){
    return num1 + num2;
}

function mul(num1, num2){
    return num1 * num2;
}

module.exports = {
    add, mul
}

main.js

const {add, mul} = require('./mathUtils.js');

console.log(add(2, 3));
console.log(mul(4, 5));

使用webpack將兩個js打包

webpack ./src/main.js ./dist/bundle.js

報錯：

ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve './dist/bundle.js' in 'C:\Users\96579\Desktop\webpack'

原因：我的版本是最新的webpack，所以有些命令不一樣了

將以上代碼修改為：

webpack ./src/main.js -o ./dist/bundle.js

（多了個 -o ）

dist目錄下成功生成bundle.js

webpack.config.js配置和package.json配置

實作：將入口檔案和出口檔案放置到組態檔中，打包時直接使用簡寫webpack

npm init

在webpack目錄中生成了package.json

然后輸入以下代碼，如果在package.json中有一些依賴的包，會自動安裝好

cnpm install

然后在webpack目錄中創建webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

output中的path要求輸入絕對路徑，path.resolve用來拼接路徑，__dirname獲取當前專案的絕對路徑

接下來就可以使用webpack來進行打包，不再需要在打包時再加上入口檔案和輸出檔案

實作：將webpack映射到npm run build

修改package.json，加入映射

webpack中使用css檔案的配置

安裝style-loader和css-loader

cnpm install style-loader --save-dev

cnpm install --save-dev css-loader

配置webpack.config.js

代碼：

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

webpack-less檔案的處理

安裝less-loader

cnpm install --save-dev less-loader less

配置

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

代碼如下

webpack-圖片檔案的處理

安裝url-loader

cnpm install --save-dev url-loader

配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

【實際開發程序中，一般建議把limit設定成8kb】

注意，當圖片大于limit中設定的尺寸時，需要安裝file-loader

cnpm install file-loader --save-dev

webpack會把打包好的檔案放到dist目錄中，需要在webpack.config.js中使用publicPath指定檔案的路徑

然后再運行

npm run build

webpack-ES6轉ES5的babel

安裝

cnpm install [email protected] @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

webpack設定vue的配置程序

引入vue.js

cnpm install vue --save

使用vue進行開發測驗

main.js

const app = new Vue({
  el: '#app',
  data: {
    message: 'webpack & vue'
  }
})

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{message}}</h2>
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

使用完整版本，修改配置

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

安裝vue-loader和vue-template-compiler

cnpm install -D vue-loader vue-template-compiler

webpack配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

webpack-橫幅plugin的使用

配置webpack.config.js

const webpack = require('webpack')
...
plugins: [
    new webpack.BannerPlugin('最終著作權歸cyy所有')
  ],

npm run build之后，查看dist目錄下的bundle.js

webpack-HtmlWebpackPlugin的使用

打包html的plugin

cnpm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
...
  plugins: [
    new HtmlWebpackPlugin(),
  ],

運行npm run build，會在dist目錄中生成index.html

webpack-UglifyjsWebpackPlugin的使用

幫助壓縮js

cnpm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

不過現在新版本默認生成的bundle.js好像就是壓縮過的

webpack-dev-server搭建本地服務器

每次改變代碼后，進行npm run build打包，開發效率比較低

webpack提供了一個可選的本地服務器，基于node.js，使用express框架，可以讓瀏覽器實時重繪修改后的效果

cnpm install --save-dev webpack-dev-server

webpack.config.js

package.json

npm run start 開啟服務

瀏覽器自動呼叫localhost:8080

修改代碼，不用再重復代碼，已經可以看到瀏覽器的內容實時更新了

webpack組態檔的分離

在webpack目錄下創建build目錄，放入3個配置的js檔案

cnpm install webpack-merge --save-dev

開發時環境 dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

//開發時
module.exports = (baseConfig, {
  devServer: {
    contentBase: "./dist",
  },
});

生產時環境 prod.config.js

const webpackMerge = require("webpack-merge");
const baseConfig = require("./base.config");
//生產時
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = (baseConfig, {
  plugins: [new UglifyJsPlugin()],
});

公共環境 base.config.js

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              //   limit小于8192時，使用base64格式
              //   Limit大于8192時，需要額外安裝file-loader
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最終著作權歸cyy所有"),
    new HtmlWebpackPlugin(),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js", // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    },
  },
};