webpack4 入門（二）

1、管理輸出

1.多入口配置

entry: {
    index1: './src/index.js',
    index2: './src/index2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

上面的配置npm run build以後會生成index.bundle.js和index2.bundle.js， 而後在index.html中添加js引用

2.設定 HtmlWebpackPlugin

HtmlWebpackPlugin會生成新的index.html，替換掉以前舊的index.html

1）安裝HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

2）配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management'
     })
   ],

3.清理 /dist 文件夾

一般，在每次構建前清理 /dist 文件夾，是比較推薦的作法，所以只會生成用到的文件。

1）安裝clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

2）配置webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
     new CleanWebpackPlugin(),
    ],

 

 2、開發

1.source map

將編譯後的代碼映射回原始源代碼。若是一個錯誤來自於 b.js，source map 就會明確的告訴你，關於source map的選項。缺點是增大致積，但不影響開發環境

// 與entry和output同級
devtool: 'inline-source-map',

2.熱加載

1）安裝webpack-dev-server

npm install --save-dev webpack-dev-server

2）配置webpack.config.js

const webpack = require('webpack');
plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
devServer: {
    //設置基本目錄結構,用於找到程序打包地址
    contentBase: './dist',
    //服務端壓縮是否開啓
    compress: true,
    //服務器的IP地址，可使用IP也可使用localhost
    host: '192.168.1.108,
    //配置服務端口號
    port: 8080,
    //是否自動打開瀏覽器
    open: true,
    hot: true,
  }

3）修改package.json

"scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack-dev-server --config webpack.config.js"
  },

執行npm run serve

 

3、webpack-merge

 開發環境和生產環境的構建目標差別很大。在開發環境中，咱們須要具備強大的、具備熱模塊替換能力的 source map 和 localhost server。而在生產環境中，咱們的目標則轉向於關注更小的 bundle以及更優化的資源，以改善加載時間。因爲要遵循邏輯分離，咱們一般建議爲每一個環境編寫彼此獨立的 webpack 配置。爲了將獨立的配置合併在一塊兒，咱們將使用一個名爲 webpack-merge 的工具。經過「通用」配置，咱們沒必要在環境特定的配置中重複代碼。

1）安裝webpack-merge

npm install --save-dev webpack-merge

2）在根目錄下建立config文件夾，而後在config文件夾下建立webpack.common.js  webpack.dev.js  webpack.prod.js文件

webpack.common.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: '../dist'
  }
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production'
});

3）修改package.json

"scripts": {
    "build:dev": "webpack --config config/webpack.dev.js",
    "build:prod": "webpack --config config/webpack.prod.js"
  },

 

4、CommonsChunkPlugin

經過使用 CommonsChunkPlugin 來移除重複的模塊，減少代碼體積

1）配置webpack.config.js

// 與entry和output同級
optimization: {
    splitChunks: {
      name: 'common',
      chunks: "initial",
    }
  },

 

5、shimming 全局變量

1）配置webpack.config.js

const webpack = require('webpack');
plugins: [
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  ],

2）在js中直接引用_就能夠

element.innerHTML = _.join(['Hello', 'webpack'], ' ');

 

 

參考：

1.https://www.webpackjs.com/guides/development/