使用webpack4.x定製本身的前端開發環境

時間 2019-12-02

標籤使用 webpack4.x webpack 定製本身前端開發環境简体版

原文原文鏈接

一，最基礎的環境

1，初始化環境

yarn init （npm init）
複製代碼

2，安裝webpack webpack-cli

說明webpack-cli 在4.0版本已經脫離了webpack 須要單獨按照，我的建議最好把按照包安裝在項目環境裏，這樣能夠確保整個項目用的版本同樣
複製代碼

yarn add webpack

      yarn add webpack-cli
複製代碼

3，在package.json 添加script

"scripts": { "build": "webpack --mode production" }css

4，咱們在項目目錄下添加一個文件src/index.js

(這是webpack默認的入口文件)html

5，執行命令

yarn run dev
複製代碼

6, webpack.config.js的基本內容

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')]
            },
        ],
    },

    // 代碼模塊路徑解析的配置
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, 'src')
        ],

        extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
    },

    plugins: [
        new UglifyPlugin(),
        // 使用 uglifyjs-webpack-plugin 來壓縮 JS 代碼
        // 若是你留意了咱們一開始直接使用 webpack 構建的結果，你會發現默認已經使用了 JS 代碼壓縮的插件
        // 這其實也是咱們命令中的 --mode production 的效果，後續的小節會介紹 webpack 的 mode 參數
    ],
}
複製代碼

基本解析：node

注意：loader 和plugins都須要單獨安裝，安裝到 devDependencies 由於這些插件都只是構建代碼時候有用webpack

二，經常使用plugins

1，UglifyPlugin

這個用來進行js代碼壓縮es6

yarn add uglifyjs-webpack-plugin --dev
複製代碼

2，html-webpack-plugin

這個用戶把打包好的js文件動態插入到index.html 默認入口文件爲根目錄下index.html 出口文件默認爲dist目錄下index.tmlweb

yarn add uglifyjs-webpack-plugin --dev
複製代碼

也容許本身定義express

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置輸出文件名和路徑
      template: 'assets/index.html', // 配置文件模板
    }),
  ],
}
複製代碼

⚠️爲何須要這個插件？爲何要動態插入？主要是由於咱們進行打包爲了防止瀏覽器緩存，每每須要給打包出來到文件添加[hash]。因此就須要動態插入npm

3，extract-text-webpack-plugin@next

若是隻用 css-loader & style-loader來轉換代碼，css會編程js代碼動態插入到html中若是想把css單獨成一個文件，就須要使用這個plugin編程

4，DefinePlugin

DefinePlugin 是 webpack 內置的插件，可使用 webpack.DefinePlugin 直接獲取。json

這個插件用於建立一些在編譯時能夠配置的全局常量，這些常量的值咱們能夠在 webpack 的配置中去指定，例如：

5，copy-webpack-plugin

咱們通常會把開發的全部源碼和資源文件放在 src/ 目錄下，構建的時候產出一個 build/ 目錄，一般會直接拿 build 中的全部文件來發布。有些文件沒通過 webpack 處理，可是咱們但願它們也能出如今 build 目錄下，這時就可使用 CopyWebpackPlugin 來處理了。

通常開發時，會在根目錄下static目錄直接拷貝過去

new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: 'static',
    ignore: ['.*']
  }
])
yarn add copy-webpack-plugin -D
複製代碼

6，ProvidePlugin

ProvidePlugin 也是一個 webpack 內置的插件，咱們能夠直接使用 webpack.ProvidePlugin 來獲取。

該組件用於引用某些模塊做爲應用運行時的變量，從而沒必要每次都用 require 或者 import，其用法相對簡單：

new webpack.ProvidePlugin({
  identifier: 'module',
  // ...
})

// 或者
new webpack.ProvidePlugin({
  identifier: ['module', 'property'], // 即引用 module 下的 property，相似 import { property } from 'module'
  // ...
})
複製代碼

在你的代碼中，當 identifier 被看成未賦值的變量時，module 就會被自動加載了，而 identifier 這個變量即 module 對外暴露的內容。

注意，若是是 ES 的 default export，那麼你須要指定模塊的 default 屬性：identifier: ['module', 'default'],。

7，IgnorePlugin

IgnorePlugin 和 ProvidePlugin 同樣，也是一個 webpack 內置的插件，能夠直接使用 webpack.IgnorePlugin 來獲取。

這個插件用於忽略某些特定的模塊，讓 webpack 不把這些指定的模塊打包進去。例如咱們使用 moment.js，直接引用後，裏邊有大量的 i18n 的代碼，致使最後打包出來的文件比較大，而實際場景並不須要這些 i18n 的代碼，這時咱們可使用 IgnorePlugin 來忽略掉這些代碼文件，配置以下

module.exports = {
  // ...
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
}
複製代碼

8，optimize-css-assets-webpack-plugin

css 代碼壓縮

const optimizeCss = require('optimize-css-assets-webpack-plugin');
plugins: [
    new optimizeCss()
]


yarn add  optimize-css-assets-webpack-plugin -D
複製代碼

三，經常使用loaders

1，babel-loader

這個loader能夠把es6 + 代碼轉換爲es5到代碼。由於瀏覽器對於es6的代碼兼容很差，可是es6不少新語法對於咱們開發工做提高很高。因此須要把 es6代碼作轉換。

yarn add babel-loader  @babel/core --dev
複製代碼

2，css-loader & style-loader

css-loader 負責解析 CSS 代碼，主要是爲了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明； style-loader 會將 css-loader 解析的結果轉變成 JS 代碼，運行時動態插入 style 標籤來讓 CSS 代碼生效。

{
    test: /\.css/,
    include: [
        path.resolve(__dirname, 'src'),
    ],
    use: [
        'style-loader',
        'css-loader',
    ],
}
複製代碼

注意：['style-loader','css-loader']這裏的配置是有順序的，但規則應用順序是從右到左的。也就是先 css-loader,再style-loader

yarn add css-loader style-loader --dev

複製代碼

segmentfault.com/a/119000001…

3，less-loader

css 預編譯器

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        // 由於這個插件須要干涉模塊轉換的內容，因此須要使用它對應的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: [
            'css-loader', 
            'less-loader',
          ],
        }), 
      },
    ],
  },
  // ...
}

yarn add less less-loader -D
複製代碼

4，file-loader & url-loader & image-webpack-loader

file-loader 能夠用於處理圖片文件

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {},
        },
    ],
}

yarn add file-loader -D
複製代碼

簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。

經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：

1）文件大小小於limit參數，url-loader將會把文件轉爲DataURL；

2）文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可。

url-loader

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  query: {
    limit: 10000,
    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

yarn add url-loader -D
複製代碼

image-webpack-loader能夠用來作圖片壓縮

{
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { // 壓縮 jpeg 的配置
                progressive: true,
                quality: 65
              },
              optipng: { // 使用 imagemin-optipng 壓縮 png，enable: false 爲關閉
                enabled: false,
              },
              pngquant: { // 使用 imagemin-pngquant 壓縮 png
                quality: '65-90',
                speed: 4
              },
              gifsicle: { // 壓縮 gif 的配置
                interlaced: false,
              },
              webp: { // 開啓 webp，會把 jpg 和 png 圖片壓縮爲 webp 格式
                quality: 75
              },
          }
yarn add image-webpack-loader

複製代碼

5，NamedModulesPlugin(), && HotModuleReplacementPlugin()

熱模塊替換相關

plugins: [ // ... new webpack.NamedModulesPlugin(), // 用於啓動 HMR 時能夠顯示模塊的相對路徑 new webpack.HotModuleReplacementPlugin(), // Hot Module Replacement 的插件 ],

四，本地服務器 webpack-dev-server & webpack-dev-middleware

1， webpack-dev-server使用

添加script

"start": "webpack-dev-server --mode development"
複製代碼

new webpack.NamedModulesPlugin(), // 用於啓動 HMR 時能夠顯示模塊的相對路徑 new webpack.HotModuleReplacementPlugin(), // Hot Module Replacement 的插件

webpack-dev-server當更多配置查看https://webpack.docschina.org/configuration/dev-server/

yarn add webpack-dev-server -D

2 ，webpack-dev-middleware使用

咱們也可使用webpack-dev-middleware 來啓動靜態服務器使用以下首先安裝 webpack-dev-middleware 依賴：

npm install webpack-dev-middleware --save-dev
複製代碼

接着建立一個 Node.js 服務的腳本文件，如 app.js：

const webpack = require('webpack')
const middleware = require('webpack-dev-middleware')
const webpackOptions = require('./webpack.config.js') // webpack
複製代碼

配置文件的路徑

// 本地的開發環境默認就是使用 development mode

webpackOptions.mode = 'development'
const compiler = webpack(webpackOptions)
const express = require('express')
const app = express()

app.use(middleware(compiler, {
  // webpack-dev-middleware 的配置選項
}))

// 其餘 Web 服務中間件
// app.use(...)

app.listen(3000, () => console.log('Example app listening on port 3000!'))
複製代碼

添加script

"start": "node app.js"
複製代碼

五，配置拆分

webpack.base.js：基礎部分，即多個文件中共享的配置 webpack.development.js：開發環境使用的配置 webpack.production.js：生產環境使用的配置所以，只要有一個工具能比較智能地合併多個配置對象，咱們就能夠很輕鬆地拆分 webpack 配置，而後經過判斷環境變量，使用工具將對應環境的多個配置對象整合後提供給 webpack 使用。這個工具就是 webpack-merge。