Как изящно перейти на webpack4

внешний интерфейс Командная строка Vue.js Webpack

предисловие

Теперь вышел с февраля 2018 года № 15 webpack4.0.0 был в течение некоторого времени, и теперь имеет @ vue / cli 3.0, но хозяин не пробовал, я слышал очень мощный, вы хотите проверить воду, чтобы увидеть документ может быть@vue/cli, официальный скаффолдинг использует webpack4, ваш проект все еще застрял в webpack3 или даже webpack2, вы чувствуете себя устаревшим? Вдохновленный пакетом, известным как конфигурация 0, webpack4 добавляет некоторые конфигурации по умолчанию, отказывается от некоторых сложных конфигураций и более удобен для пользователя.Позвольте мне рассказать о некоторых основных изменениях.

окружающая обстановка

Node.js 4 больше не поддерживается.

Вход по умолчанию

В Webpack 4 указание входных и выходных путей больше не является обязательным. webpack 4 будет по умолчанию записывать в ./src и выводить в ./dist, конечно, это просто закуска.

режим сборки режим

Webpack предоставляет два режима сборки на выбор: разработка и производство.

опции описывать
development установит значение process.env.NODE_ENV в development. Включите NamedChunksPlugin (закрепляет идентификатор чанка во время выполнения и разделяет чанки при использовании динамической загрузки) и NamedModulesPlugin (при использовании этого плагина, когда HMR [горячая перезагрузка] включена, будет отображаться относительный путь к модулю).
production установит значение process.env.NODE_ENV на производство. Включите плагин FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin и UglifyJsPlugin.

То есть, если режим разработки, официальные леса могут обрезать код.

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({
-     'process.env': require('../config/dev.env')
-   }),
- ]
}

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

 // webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({
-       'process.env': require('../config/dev.env')
-    }),
-    new webpack.optimize.ModuleConcatenationPlugin()
-  ]
}

import(): динамический импорт

В webpack 4 функция import() возвращает объект с пространством имен, что не влияет на модуль ES, но добавляет слой оболочки для модулей, соответствующих спецификации commonjs:

// webpack 2/3
import("./commonjs").then(exports => {
	// ...
})

// webpack 4
import("./commonjs").then({default: exports}=> {
	// ...
})

элемент конфигурации оптимизации

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

При использовании этой конфигурации некоторые предыдущие плагины могут быть заменены конфигурацией в оптимизации.

  • Плагин NoEmitOnErrorsPlugin заменен на Optimization.noEmitOnErrors (по умолчанию только в рабочем режиме).
  • ModuleConcatenationPlugin заменен наOptimise.concatenateModules (по умолчанию только в рабочем режиме)
  • Плагин NamedModulesPlugin заменен на Optimization.namedModules (по умолчанию только в режиме разработки). Плагин CommonsChunkPlugin устарел, используйте вместо него оптимизацию.splitChunks, оптимизацию.runtimeChunk.
// webpack.prod.conf.js
const config = {
   // ...
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.ModuleConcatenationPlugin(),    // 预编译
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
   ],
+  optimization: {
+    noEmitOnErrors: true,
+    concatenateModules: true,
+    splitChunks: { 
+       chunks: 'all', 
+       name: 'common', 
+    }, 
+    runtimeChunk: { 
+        name: 'runtime'
+    }
+  }
};

// webpack.dev.conf.js
const config = {
   // ...
   plugins: [
-    new webpack.NamedModulesPlugin()
   ]
+  optimization: {
+    namedModules: true
+  }
};

Оптимизация.splitChunks не установлена ​​по умолчанию. Если режим производственный, Webpack 4 включит разделение кода. По умолчанию Webpack 4 будет разделять только код по требованию. Если нам нужно настроить начальный код загрузки, чтобы он также добавлялся в разделение кода, мы можем установить для splitChunks.chunks значение «все».

компрессия

Когда режим webpack4 установлен на производство, сжатие кода включено по умолчанию, но я должен ударить по доске и нарисовать ключевые точки. сжатие, кеширование и синтаксис es6, нет необходимости отдельно устанавливать и конвертировать устройство. Впечатлен или нет. Если вы хотите увидеть это, вы можете посмотреть здесьавтостопщик. Если вы хотите переопределить конфигурацию, вы можете сделать это

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

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin() // 具体配置可看github
    ]
  }
}

##Удаленные функции ## удален модуль.загрузчики Удалены loaderContext.options Удален Compilation.notCacheable Удален плагин NoErrors. Удален Dependency.isEqualResource Удален плагин NewWatching. Удален плагин CommonsChunk.

окружающий

Теперь, когда веб-пакет сделал относительно большое обновление, не стесняйтесь менять окружающие вспомогательные средства.Поскольку я обычно использую vue в своем проекте, если вы также используете vue, то есть несколько изменений для vue, о которых вам нужно знать. :

vue-loader

Какой? Не можете больше учиться, просто используйте строительные леса официального сайта? Передовые знания постоянно обновляются, почивают на лаврах и только отступают, если не продвигаются вперед. Но вы должны верить, что будь то веб-пакет или vue-loader, API станет более понятным, а производительность будет более эффективной, так что помогите мне, я все еще могу учиться. . .

Vue Loader v15 использует другую стратегию для определения загрузчиков, используемых языковыми блоками.vue-loader v15В версии 14 или ниже, если вы хотели настроить параметры производного загрузчика, вам приходилось повторять это в параметрах собственных загрузчиков Vue Loader. В v15 вам больше не нужно этого делать. Возьмем в качестве примера официальный скаффолдинг, вы можете увидеть две функции, параметры, используемые для генерации vue-loader и module.rule, я могу увидеть их, вытащив их.

// util.js
exports.cssLoaders = function (options) {
   // ...
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  // ...
}


// vue-loader-conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  ...
}

// webpack.dev.config
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  ...
}

Когда я впервые вошел в яму со строительными лесами, я был ослеплен.Почему я написал это для Демасии? Конечно нет, ибо заливка ямы vue-loader v14 Версия vue-loader v15 должна быть написана только один раз, но обратите вниманиеОбязательно добавьте плагин Vue Loader к конфигурации WebPack

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // ...
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

Затем из-за различной обработки файлов css в производственной и тестовой средах. Просто настройте загрузчик less/scss css в webpack.dev.config.js и webpack.prod.config.js соответственно:

{
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}

mini-css-extract-plugin извлечение css

WebPack V4 официально не рекомендует использовать экстракт-текст-веб-плагин, изменить мини-CSS-экстрактивный плагин

// webpack4
npm install -D mini-css-extract-plugin

// webpack.config.js
var MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // 其它选项...
  module: {
    rules: [
      // ... 忽略其它规则
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: style.css
    })
  ]
}

// webpack3
npm install -D extract-text-webpack-plugin
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
  // 其它选项...
  module: {
    rules: [
      // ...其它规则忽略
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          use: 'css-loader',
          fallback: 'vue-style-loader'
        })
      }
    ]
  },
  plugins: [
    // ...vue-loader 插件忽略
    new ExtractTextPlugin("style.css")
  ]
}

Благосостояние

Студенты, не знакомые с официальной структурой webpack3, могут прочитать комментарии, которые я написал в соответствии с моим собственным пониманием.здесьЧувствуете хлопоты и не хотите делать это самостоятельно? Не беда, я переделал по скаффолдингу, и вы можете попробовать, если вам интересно.здесьЕсли вы считаете, что это хорошо, пожалуйста, поставьте звезду. Кроме того, я планирую оптимизировать веб-пакет в следующей статье. Если вам это нравится, вы можете обратить внимание

Ссылаться на

  1. документация веб-пакета
  2. webpack github release
  3. Рекомендации по настройке Webpack 4
Категории