學習webpack4 - 基礎配置

學習webpack4 - 基礎配置
學習webpack4 - HTML處理
學習webpack4 - 樣式處理
學習webpack4 - ES6語法轉化
學習webpack4 - 第三方庫的使用
學習webpack4 - 抽離公共代碼

=======================================================

基礎配置

安裝

yarn init -y 初始化項目
yarn add webpack webpack-cli -D

嘗試運行

step1: 新建src目錄， 在src目錄下新增一個index.js文件，並輸入：console.log('丸子');
step2: 打開package.json文件，添加一個腳本：

"scripts": {
   "build": "webpack"
 }

嘗試運行一次：

npm run build

打包成功了！當前目錄結構爲：

當前目錄中並無webpack.config.js這個文件卻還能打包成功？由於在webpack4中沒必要必定要有配置文件了，也沒必要必定要指定一個入口和出口才能打包成功。它會默認找到./src/index.js 做爲默認入口點而且在 ./dist/main.js 中輸出模塊包，可是這樣不是很靈活，由於名字之類的都指定了，那麼怎麼本身配置這些東西呢？

入口&出口配置

step1: 根目錄下新建一個webpack.config.js文件
step2: 打開webpack.config.js文件，進行入口和出口配置：

let path = require('path');

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

嘗試運行一下：npm run build

運行成功了。

當前目錄結構爲：

兩個配置：

1. entry: 入口配置
   用來指定入口起點，默認./src，進入入口起點後，webpack會找出有哪些模塊和庫是入口起點直接和間接依賴的。

2. output: 出口配置
   用來指定在哪裏輸出所建立的bundles，默認./dist，其中：

   • filename: 輸出文件名稱
   • path: 輸出文件存放路徑，該路徑是絕對路徑

上面結果中還看到有一個warning說mode沒有設置，這個mode是模式，接下來配置下這個mode

多入口和多出口配置

module.exports = {
  //...

  // 多入口和多出口配置
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  //...
}

這樣就完成了多入口和多出口的配置，可是編譯出的文件須要自動生成相應的html而且引入對應的js文件的時候改怎麼處理呢？用chunks去區分，以下：

let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //...

  // 多入口和多出口配置
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  //插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包後的文件名稱
      hash: true, //hash
      chunks: ['home']  //引入須要的那個對應的js的文件（多入口時用)
    }),
    new HtmlWebpackPlugin({
      template: './src/other.html', 
      filename: 'other.html',
      hash: true, //hash
      chunks: ['other'] 
    })
  ]
  //...
}

這樣就保證了編譯後自動生成html文件能正確引用生成的js文件。

模式配置

mode（模式）：分別是production(生產) 和 development(開發) 模式

方法一：打開webpack.config.js文件，配置mode

方法二：打開package.json文件，配置腳本

嘗試運行，

npm run dev  //開發環境
npm run build //生產環境

警告消失，結果以下：

watch監控

項目中若是咱們代碼有改動，webpack就會實時監控並編譯的話，開發就會舒服的多，實現方法以下：

module.exports = {
  //...

   //監控配置
  watch: true,
  watchOptions: {
    poll: 1000, //每秒鐘詢問多少次
    aggregateTimeout: 500, //防抖
    ignored: /node_modules/ //忽略不須要監控的
  },
  
  //...
}

（補充）啓動本地服務

在本地開發的時候， 老是要本身在瀏覽器中打開文件，這樣很很差， 那麼怎麼在本地開一個服務呢？
step1: 安裝webpack-dev-server

yarn add webpack-dev-server -D

step2: 打開webpack.config.js文件，配置webServer

devServer: {
  port: 3000, //端口號
  progress: true, //進度條
  contentBase: './dist', //指定目錄運行服務
  open: true //自動打開瀏覽器
}

step3: 打開package.json文件，更改下腳本

"scripts": {
   "dev": "webpack --mode development && webpack-dev-server",
   "build": "webpack --mode production"
 }

嘗試運行：

npm run dev

成功！結果以下：

此時瀏覽器會自動打開 http://localhost:3000/