Продвинутые навыки работы с веб-пакетами, которые стоит знать

JavaScript Webpack
Продвинутые навыки работы с веб-пакетами, которые стоит знать

существуетПока эти несколько шагов, сбой веб-пакета не проблема.В этой статье автор кратко представляет обычное использование webpack. Он может удовлетворить самые основные потребности развития. В этой статье поговорим о некоторых более продвинутых приложениях.

1. Настройте сценарии сборки для разных сред

Предыдущую сборку делалnpx webpack ...Выполните команду сборки таким образом. Вам может показаться, что этот метод недостаточно эффективен. Даже в некоторых особых случаях необходимо установить переменные среды Node. В зависимости от значения переменной окружения установите build --mode по-разному.

вход, расположенный в сценарияхpackage.json, а затем представить его дальше. выполнивnpm iВсе зависимости в package.json устанавливаются по умолчанию.

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },

Плагин cross-env для установки переменных среды узла npm i cross-env -D

  • Сборка среды разработки:npm run dev

Как видно из рисунка,npm run devэквивалентноnpx webpack-dev-server

  • Построение производственной среды:npm run build

1.1 установить узел переменной среды

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server",
    "build": "cross-env NODE_ENV=production webpack"
  },

Сначала установите плагинcross-env

npm i cross-env -D

воплощать в жизньnpm run dev, сначала установите переменную среды NODE_ENV=devlelopment, а затем выполните команду webpack.

Зачем устанавливать переменную среды?После установки переменных среды сценарии под соответствующими переменными среды могут выполняться при сборке пакета.

в webpack.config.jsprocess.env.NODE_ENV拿到环境变量值。 Делай что хочешь.哈哈哈~

  • Определите глобальные переменные с помощью плагина, который поставляется с веб-пакетом._DEV_, аналогично окну глобальной переменной
//应用: 在项目 src/index.js 文件中代码里区分开发或者是生产环境
 if(__DEV__){
     alert('开发环境')
 }else{
     alert('生产环境')
 }
  • В зависимости от среды, чтобы установить, доступны ли определенные плагины

В файле webpack.config.js установите переменную let isDev = process.env.NODE_ENV === 'development', а затем определите значение свойства отключения плагина.

  plugins: [
        new ExtractTextWebpackPlugin({
            filename: 'css/index.css',
            disable: isDev
        }),
    ],

1.2 Создание библиотеки динамической компоновки DLL

Файл с расширением .dll называется динамически подключаемой библиотекой, которая может содержать функции и данные, вызываемые другими модулями.

  • ПучокБазовый модуль независимУпакован в отдельную динамическую библиотеку.
  • Когда импортируемый модуль находится в библиотеке динамической компоновки, модульне могу сделать это сноваупакован, но перейдите в библиотеку динамической компоновки, чтобы получить dll-плагин
  • Повышение эффективности сборки

реагировать, реагировать-дом например

  • Создайте webpack.config.react.js
let path = require('path');
let webpack = require('webpack');

module.exports  = {
    entry: {
        vendor: ['react', 'react-dom']
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
        libraryTarget: "var",  //构建后输出js文件所属规范， 如果 设置为 commonjs, 则输出文件符合 commonjs规范
        library: '_dll_[name]', //构建后输出js库的名字
      
    },
    mode: 'development',
    plugins: [
        new webpack.DllPlugin({
            name: '_dll_[name]',
            path: path.join(__dirname, 'dist', '[name].manifest.json')
        })
    ],
};
  • установить команду сборки
 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "react": "wepack --config webpack.config.react.js"
  },
  • Выполнить реакцию запуска npm

  • выходной файл vendor.js

1.3 Использование динамически подключаемых библиотек

Настройте плагины в webpack.config.js

plugins: [
    new webpack.DllReferencePlugin({
        manifest: path.resolve(__dirname, 'dist', 'vendor.manifest.json')
    })
]
  • Компилятор реакции должен быть установлен следующим образом: загрузчик

npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D

  • Настройка связанных правил
   module: {
        rules: [
            {
                test: /\.jsx?/,
                use: 'babel-loader',
                exclude:/node_modules/,
                include:/src/
            },
        ]
    },
  • Создайте файл .babelrc в корневом каталоге проекта.
{
    "presets": [
        "env",
        "stage-0",
        "react"
    ]
}

  • выполнить команду сборкиnpm run build, консоль печатает:
[./node_modules/react-dom/index.js] delegated ./node_modules/react-dom/index.js from dll-reference _dll_vendor 42 bytes {index} [built]
[./node_modules/react/index.js] delegated ./node_modules/react/index.js from dll-reference _dll_vendor 42 bytes {index} [built]

Видно, что при сборке проекта используется предварительно созданный файл библиотеки реагирования, и время сборки, выводимое из консоли, также значительно отличается.

2. Извлечь общий код (библиотеки или компоненты)

  • Создайте файлы src/a.js, src/x.js
  • Импортируйте файл a.js как в файл src/index.js, так и в файл src/x.js.
  • Внесите файлы библиотеки реагирования в файлы src/index.js и src/x.js.

index.js

import './index.css';
// if(module.hot){
//    console.log('热更新');
// }
import React, { Component } from 'react'
import { render } from 'react-dom'
import a from './a.js'

render(<h1>hello zfpx</h1>, window.app)

x.js

import React, { Component } from 'react'
import { render } from 'react-dom'

import a from './a.js'

a.js

module.exports = {
    a: 'a.js'
}

Настройте в webpack.config.js:

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: { //提供公共组件， 只要超出0字节就生产新的包
                    chunks: 'initial',
                    //miniChunks: 2,
                    //maxInitalRequest: 5,
                    name: 'commons',
                    minSize: 0 
                },
                vendor: {// 抽离第三插件
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vender',
                    priority: 10,
                    enforce: true
                }
            }
        }
    },

Выполнить скрипт сборкиnpm run build, консоль печатает:

Если вы аннотируете соответствующую информацию о сборке:

Из консольной информации двух видно, что размер файлов index.js и x.js после построения отличается от количества файлов, выводимых в каталоге dist.

3. Установите глобальные переменные

После введения jquery.js в index.js я хочу использовать объект jquery непосредственно в файле .js, не вводя jquery.js

Конфигурация в webpack.config.js

module: {
    rules: [
        {
        test: /jquery/,
        use:[{
            loader:'expose-loader',
            options:'$'
        }]
        },
    ]
}

Или используйте встроенный плагин, предоставляемый webpack

 // 提供全局变量插件
        new webpack.ProvidePlugin({
            $:'jquery'
        }),

Какая разница между двумя?

  • При использовании плагинов:
1. $不会定义到window上
2. 只要是用到jquery(或者 $)的地方,当前bundle.js都会把jquery打包进去

Соответствующая конфигурация webpack.config.js:

entry: {
        index: './src/index.js',
        x: './src/x.js'
    },
 output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: '_dll_[name]'
},
...
pugins: [
 new HtmlWebpackPlugin({
            template: 'src/index.html',
            hash: true
        }),
]

index.js

console.log($)

x.js

console.log($);

Как видно из построения лога, размеры файла x.js и файла index.js одного размера.

  • Используйте Expose-Loader
1.导入一次，就会暴露出来
2.$会定义到在window上

index.js

import $ from 'jquery'
console.log('index.js');
console.log($);

x.js

console.log('x.js');
console.log($);
console.log(window.$);

Журнал сборки:

Журнал печати браузера:

Как видно из журнала сборки, размер файла после сборки index.js не соответствует размеру файла, созданного x.js. Из журнала печати браузера видно, что x.js также может получить объект jquery без прямого импорта jquery.

4. Резюме

Webpack также имеет много других применимых функций, например, при использовании vue соответствующий компонент js часто загружается по маршруту, как мы его называем.нагрузка по требованию. Разделение можно использовать в коде webpackДинамический импорт и отложенная загрузка (динамический импорт), оптимизировать загрузку кода и повысить производительность.

Категории