Текущий проект, который я использую, - это webpack3.6. Приложение - это проект, установленный vue-cli. Поскольку официальный webpack4 еще не скаффолд, нам нужно выполнить обновление вручную, если мы обновимся до webpack4. Я выполнил следующие шаги для обновления.
Примечание. Я использую версию npm 6.4.1; вы можете выполнить команду npm -v в терминале, чтобы просмотреть текущую версию npm.
1. Сначала обновите веб-пакет (сначала удалите предыдущий веб-пакет)
npm uninstall webpack
После удаления установите webpack. В этом случае соответствующая версия webpack будет установлена в соответствии с вашим npm. Конечно, вы также можете указать версию для установки webpack.
npm i webpack
2. После установки webpack мы устанавливаем webpack-cli. Зачем мне использовать webpack-cli? Основная функция: простой клиент, используемый для подключения к соответствующей службе по протоколу webpack.
npm i webpack-cli
3. После обновления webpack и установки webpack-cli сначала запустим проект.
npm run dev
Обнаружена ошибка:
в основном это вызвано версией webpack-dev-serve, которая не соответствует текущей версии webpack.
Согласно международной практике, сначала удалите предыдущий webpack-dev-server, а затем установите webpack-dev-server
npm i webpack-dev-server
4. После обновления webpack-dev-server (3.8.0) запустите npm run dev и
продолжайте сообщать об ошибке:
Эта ошибка вызвана несоответствием между версией html-webpack-pligun и текущим webpack. Мы продолжаем чтобы сначала удалить его Установите html-webpack-plugin
npm i html-webpack-plugin
5. После обновления html-webpack-plugin при выполнении npm run dev
возникла следующая ошибка:
Эта ошибка в основном вызвана несоответствием между vue-loader и текущей версией webpack. Удалите, а затем установите
npm i vue-loader
После установки нам нужно изменить конфигурацию в build / webpack.base.conf.js;
перед этим
const vueLoaderConfig = require('./vue-loader.conf')
нам нужно удалить этот фрагмент кода и изменить следующий метод импорта:
const {VueLoaderPlugin} = require('vue-loader')
Затем удалите эту строку кода, как показано на рисунке.
Новый vue-loader используется в форме плагина, поэтому мы настраиваем плагин vue-loader, а затем настраиваем параметр: mode для информирования текущего среда, уникальная для webpack4
plugins:[
new VueLoaderPlugin()
],
mode:process.env.NODE_ENV,
6. Выполните команду npm run dev, терминал не сообщил об ошибке, но браузер не открылся автоматически, поэтому нам также необходимо изменить конфигурацию, чтобы автоматически открывать браузер: найдите в config / index.js, найдите autoOpenBrowser: false, измените эту Ture
autoOpenBrowser：ture
Почему здесь изменили? Из-за конфигурации dev-сервера в build / webpack.dev.conf.js: open принимает значение, настроенное здесь.
Затем выполните npm run dev
В этот момент вы, должно быть, очень взволнованы, потому что терминал не сообщил об ошибке и, наконец, увидел «Скомпилировано успешно за 5130 мс», но браузер не удовлетворен и не выдаст вам всю ошибку. Вы - эскорт, когда вы являются браузером, да, браузером. У нас нет возможности сообщить об ошибке. Этот вопрос на Baidu скажет вам, что module.exports и import нельзя использовать вместе. Вы обязательно скажете "mmp" в глубине души. Где я использовал вместе? Я не могу найти этот отчет об ошибке в Интернете.
Решить эту проблему очень просто, вам нужно только найти файл .babelrc, а затем найти «плагины»: [«transform-vue-jsx», «transform-runtime»], измените это на
"plugins": ["transform-vue-jsx"]
Затем, если вы позволите мне сообщить об ошибке, я удалю вас
npm uninstall babel-plugin-transform-runtime
На этом мы завершили обновление конфигурации, необходимое для разработки. Далее нам нужно завершить обновление сборки.
7. Выполните команду npm run build,
чтобы сообщить нам, что способ разделения кода в webpack4 отличается, и у нас есть новые правила игры. Ладно, мало поменять. Найдите build / webpack.prod.conf.js и закомментируйте или удалите весь код, зараженный CommonsChunkPlugin.
Затем настройте новый метод упаковки в соответствии с новыми правилами игры.
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
},
vendor:{
test: /node_modules/,
name: 'vendor',
chunks:'all'
}
}
}
},
8. Выполните npm run build еще раз, и появится следующая ошибка.
Эта ошибка в основном связана с тем, что плагин extract-text-plugin не соответствует текущей версии webpack. После webpack4 для извлечения css используется mini-css-extract-plugin. Этот плагин называется: ①Асинхронная
загрузка
② Отсутствие повторной компиляции, лучшая производительность
③ Легче в использовании install Мы устанавливаем
только для
мощного внешнего вида CSS , и используем его, чтобы проверить, есть ли хвастовство! ! !
npm uninstall extract-text-plugin
npm i mini-css-extract-plugin
Затем найдите build / webpack.prod.conf.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
Измените это введение на:
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
Затем замените новый ExtractTextPlugin () в Pulgins новым MiniCssExtractPlugin
9. Продолжите выполнение npm run build и
обнаружите, что упаковка может быть завершена, но после упаковки было сообщено об ошибке. У меня скверный характер, там, где есть ошибка, я удаляю код.
При сообщении об этой ошибке мы в основном использовали рабочий загрузчик. Мы нашли его в build / utils.js, потому что здесь был представлен extract-text-plugin, поэтому здесь мы изменили его на mini-css-extract-plugin.
const ExtractTextPlugin = require('extract-text-webpack-plugin')
Изменить на
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
Тогда следующая конфигурация
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
``
改成
return [MiniCssExtractPlugin.loader].concat(loaders)
Хорошо, на этом мы завершили основные работы по обновлению.
Поскольку webpack4 поставляется с функцией упаковки js, uglifyjs-webpack-plugin не используется, вы можете удалить uglifyjs-webpack-plugin
Я использую rimraf с 9102 года, почему бы не использовать clean-webpack-plugin, чтобы заинтересованные студенты могли выполнить следующие шаги, чтобы продолжить обновление вашего проекта
npm uninstall rimraf
Затем установите плагин clean-webpack
npm i clean-webpack-plugin
Измените команду запуска package.json
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"
Просто введите плагин в build / webpack.prod.conf.js
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins：[
new CleanWebpackPlugin()
]
Установить еще один индикатор выполнения
npm i progress-bar-webpack-plugin
Введено в build / webpack.base.conf.js
require('./check-versions')() //检验版本插件是否对应
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins:[
new VueLoaderPlugin(),
new ProgressBarPlugin()
],
Наконец, поменяйте небольшое место:
config / index.js Найдите конфигурацию сборки:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
Изменить на
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: '',
assetsPublicPath: '',
Доступ к упакованным файлам
Последний пункт - удалить ненужные плагины, такие как uglifyjs-webpack-plugin, ora, chalk, и удалить файл build / bulild.js.
Работа сделана, вы уже можете использовать свой код