聊聊webpack 4

前言

hello，小夥伴們，本篇倉庫出至於個人GitHub倉庫 web-study ，若是你以爲對你有幫助的話歡迎star，大家的點贊是我持續更新的動力

web-study

webpack 打包工具

webpack 毫無疑問如今是很是火熱的前端自動化打包工具，本系列教程是基於最新版 webpack 4.X.X 來編寫。

webpack 4：零配置開始

1. 建立一個目錄而後進入，初始化生成 package.json 文件

md webpack-4-quickstart

cd webpack-4-quickstart

npm init -y

1. 安裝 webpack4 和 webpack-cli

npm install webpack webpack-cli --save-dev

1. 打開 package.json 添加構建腳本：

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

1. 建立入口文件： index.js ，webpack4 默認入口文件爲/src/index.js

console.log('hello world!')

1. 打包構建

npm run build

你會在 ~/webpack-4-quickstart/dist/main.js 獲得你打包後的文件。

Webpack 4: 生產和開發模式

建立 webpack.config.js webpack 配置文件，webpack 4 介紹了生產（production） 和開發（development） 兩種模式，須要經過 mode屬性指定。

在webpack.config.js文件中指定mode 屬性爲development，再次打包文件。（npm run build）。

能夠看到main.js文件中的代碼沒被壓縮，哈哈，這就是 webpack 的厲害之處，能夠分模式開發。

webpack 4：覆蓋默認的入口/出口文件

在webpack.config.js 文件中經過 entry 屬性指定打包的入口文件，output屬性指定打包後的出口文件。

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/hello.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 這裏必須指定一個絕對路徑
    filename: 'hello.js'
  }
}

再次打包，就會打包 ./src/hello.js ，輸出 ./dist/hello.js。

webpack 4：用 Babel 7 轉譯 ES6 的 js 代碼

如今你們都習慣用 ES6 寫 Javascript。

可是不是全部瀏覽器都知道怎麼處理 ES6。咱們須要作一些轉換。

這個轉換的步驟叫作 transpiling。transpiling 是指把 ES6 轉譯成瀏覽器可以識別的代碼。

webpack 自己並不知道如何去轉換，可是有 loaders。把他們想象成轉換器。

babel-loader 是 webpack 的一個 loader，能夠把 ES6 以上的代碼轉譯成 ES5。

爲了使用這個 loader 咱們須要去安裝一系列的依賴。特別是：

• babel-core
• babel-loader
• babel-preset-env （for compiling Javascript ES6 code down to ES5）

先安了吧：

npm i babel-core babel-loader babel-preset-env --save-dev

下一步咱們在項目目錄下創建一個 .babelrc文件用來配置 Babel。

{
  "presets": ["env"]
}

配置完成後經過配置文件使用 babel-loader

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

webpack 4：HTML 插件

webpack 須要兩個額外的組件去處理 HTML：html-webpack-plugin 和 html-loader。

先安裝：

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

webpack 的配置 html-loader

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: { minimize: true } // 是否壓縮代碼
    }
  ]
}

... 插件使用...
plugins: [
  new HtmlWebPackPlugin({
    template: './src/index.html',
    filename: './index.html'
  })
]

在 ./src/index.html 新建一個 HTML 文件（模板文件，用來給webpack打包）

最後運行 npm run build 從新打包，查看 ./dist 目錄，你會看到運行後的結果。

沒有必要在你的 HTML 文件中引入你的 JavaScript：它會自動地注入進去。

在瀏覽器打開 ./dist/index.html：你能夠看到最後的結果。

webpack 4： 提取 CSS 到文件中

mini-css-extract-plugin 插件用來提取 CSS 到文件中。

安裝它：

npm i mini-css-extract-plugin css-loader --save-dev

而後創建一個 CSS 文件用來測試：

body {
  line-height: 2;
}

配置 loader 和 plugin：

{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
}

...插件使用...
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css'
})

最後在入口文件中引入 CSS：

import style from './main.css'

構建：

npm run build

查看 ./dist 目錄，你應該能看到 CSS 的結果！

重點回顧：extract-text-webpack-plugin 在 webpack 4 中不能用了。請使用 mini-css-extract-plugin。

webpack 4：webpack dev server

一旦配置了 webpack dev server 它會在瀏覽器中加載你的 app。

只要你改變了文件，它會自動地刷新瀏覽器的頁面。

安裝下面的包來搭建 webpack dev server：

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

而後打開 package.json 調整腳本：

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

保存關閉。

如今運行：

npm run dev

你就會看到 webpack dev server 在瀏覽器中加載你的應用了。

webpack dev server 很是適合用來開發。