Webpack系列—快速入門

原文地址：https://github.com/huruji/blog/issues/3

入口

單文件入口
指定entry鍵值

const config = {
  entry: './yourpath/file.js'
};
module.exports = config

上面的是如下的簡寫：

const config = {
  entry: {
    main: './yourpath/file.js'
  }
};
module.exports = config

多文件入口
對entry採用對象寫法，指定對應的鍵值對，爲了輸出這多個文件可使用佔位符

const path = require('path');
const config = {
  entry: {
    app1: './src/main.js',
    app2: './src/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

輸出

指定打包構建以後輸出的文件
單文件輸出
指定output鍵值，值爲對象，對象中指定path和filename

const path = require('path');
const config = {
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

多文件輸出
使用佔位符，輸出文件將按照多文件入口指定的鍵來替代佔位符

const path = require('path');
const config = {
  entry: {
    app1: './src/main.js',
    app2: './src/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

Loader

Loader能夠在加載模塊時預處理文件，相似於gulp中的task。配置loader須要在module選項下指定對應後綴名相應的rules，使用test正則指定後綴名，使用use指定相應的loader

容許在js中import css
須要使用style-loader和css-loader，首先須要安裝：

npm i css-loader style-loader --save-dev

使用loader

const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }]
  }
};

module.exports = config;

模塊文件寫法：

import './css/main.css'

容許加載圖片
須要使用file-loader,首先安裝：

npm i file-loader --save-dev

使用：

const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.(png|jpg|svg|gif)$/,
      use: [
        'file-loader'
      ]
    }]
  }
};

module.exports = config;

模塊文件寫法：

import logo from './image/logo.svg';

插件

插件的目的在於解決loader解決不了的事情，使用插件指定plugins選項便可，須要注意的使用插件須要引入插件。如使用HtmlWebpackPlugin插件爲咱們自動生成一個html文件。

首先安裝：

npm i --save-dev html-webpack-plugin

配置webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },{
      test: /\.(png|jpg|svg|gif)$/,
      use: [
        'file-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '個人webpack'
    })
  ]
};

module.exports = config;

使用source map

源代碼被webpack打包以後，會很難追蹤到原始的代碼的位置，使用source map功能，能夠將編譯後的代碼映射回原始代碼位置，指定devtool選項便可：

const config = {
  // ....
  devtool: 'inline-source-map'
};

module.exports = config;

使用webpack-dev-server

webpack-dev-server提供了一個簡單的web服務器，並可以實時從新加載使用webpack須要先安裝：

npm i --save-dev webpack-dev-server

在配置文件中指定devServer選項，告訴服務器在哪裏尋找文件

const config = {
  // ....
  devServer: {
    contentBase: './dist'
  }
};

module.exports = config;

使用命令行運行命令或者在package.json中指定scripts

webpack-dev-server --open

此時服務將運行在8080端口，其中open選項表示服務開啓以後當即在默認瀏覽器中打開頁面。

開啓熱更新

開啓熱更新很簡單，只須要更新webpack-dev-server配置，增長hot選項，同時使用webpack自帶的HMR插件

const config = {
  // ....
  devServer: {
    contentBase: './dist',
    hot:true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = config;

精簡輸出

在實際中是開發中可能有些模塊的方法並無被使用，也就是說，在開發中這些方法並無被import，這些沒有被使用的代碼應該被刪除的，使用uglifyjs-webpack-plugin插件能夠幫助咱們刪除這些代碼，同時作代碼混淆和壓縮。
安裝：

npm i -D uglifyjf-webpack-plugin

使用：

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

const config = {
  // ....
  plugins: [
    new UglifyJSPlugin()
  ]
};

module.exports = config;

生產和開發構建分離

生產和開發中的構建確定是不一樣，生產中側重於一個更好的開發體驗，而生產環境中則須要更多的性能優化，更小的chunk。webpakck能夠指定命令運行以來的配置文件，經過在package.json中寫入script是一種不錯的方式。而生產和開發中的配置確定有不少重複的地方，使用webpack-merge能夠合併通用配置
安裝：

npm i -D webpack-merge

webpack.common.js

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

const config = {
  entry: './src/main.js',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'My App'
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
}

module.exports = config;

webpack.dev.js

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

const config = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

module.exports = config;

webpack.prod.js

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common');

const config = merge(common, {
  plugins: [
    new UglifyJSPlugin()
  ]
});

module.exports = config;

package.json

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

許多lib經過與process.env.NODE_ENV環境關聯來決定lib中使用哪些內容，使用webpack內置的DefinePlugin能夠爲全部依賴指定這個變量。

const config = {
  // ......
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'MODE_ENV': JSON.stringify('production')
      }
    })
  ]
  // ......
}

讓輸出的文件名帶有哈希值

讓文件名帶有hash能夠方便在生產環境中用戶及時更新緩存，讓文件名帶有hash可使用和構建相關的[hash]佔位符，也可使用與chunk相關的[chunkhash]佔位符，一般後一種是更好的選擇

const config = {
  //......
  output: {
    filename: [name].[chunkhash].js,
    path: path.join(__dirname, 'dist')
  }
  // ......
}

讓webpack不打包指定的lib

在開發中有些時候咱們須要webpack不打包某些lib，這在咱們開發lib的時候特別常見，好比咱們爲react開發插件，不但願打包的時候包含react。使用配置的external選項能夠作到，

const config = {
  "externals": [
    "react",
    "react-dom"
  ]
}