Руководство пользователя Webpack 4

В последнее время я хочу изучить Webpack, и я прочитал много связанных статей в Интернете, но Webpack обновляется слишком быстро, и многие статьи не применимы к новой версии weback.Я изучил его с нуля, и я поделюсь с вами здесь Пожалуйста, укажите неправильное место.

Введение

• Создание проекта Webpack с нуля
• Встречаются различные предупреждения
• упаковать js-файлы
• обрабатывать css-файлы
• использование плагина
• Извлечь общедоступную библиотеку js
• webpack-dev-сервер и т.д...

1. Создайте проект веб-пакета

Сначала вам нужен node.js (моя версия node v8.9.4, npm v5.6.0)
Создать папкуmkdir webpack-myвойти в папкуcd webpack-my
Создать проектnpm initвсю дорогу назад
Установите веб-пакет webpack-cli (команда, которую вы хотите выполнить, должна иметь этот пакет)
--save-dev только для добавления зависимостей в среду разработки
npm install --save-dev webpack webpack-cli
При выполнении окна должно быть несколько предупреждений.Хотя предупреждение не имеет большого значения, давайте посмотрим
WARN nomnom@1.8.1: Package no longer supported...пакет nomnom устарел, оставьте его в покое
WARN babel-preset-es2015@6.24.1Babel рекомендует использовать babel-preset-env, и мы установим его ниже.
WARN webpack-my@1.0.0 No repository fieldПредупреждение без адреса склада можно найти по адресуnpm initУстановить или изменить в командеpackage.json:

"repository": {
    "type": "git",
    "url": "http://path.xxx"
}

или установить"private": trueсделать приватным
webpack-my@1.0.0 No descriptionБез описания, в основном то же, что и выше...
дваWARN SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3fsevent - это система mac osx, предупреждение игнорируется... (Легкое обсессивно-компульсивное расстройство, предупреждение не смотреть все неудобно...)

2. Обработка js-файлов

1. Установите вавилон

Для обработки js файлов нам нужно использовать bable, сначала установите его
npm install --save-dev babel-loader babel-core

2. Установите babel-preset-env

Он используется для выхода из es6 и т. д.Введение в babel-preset-env
npm install --save-dev babel-preset-env
Создать в корневом каталоге.babelrcфайл, добавьте следующий код

{
    "presets": ["env"]
}

3. Решить проблемы совместимости и производительности браузера

Чтобы браузеры не поддерживали Promise/Object.assign/Array.from и другие проблемы с производительностью, мы представляем два пакета:

• babel-polyfill Введение в babel-polyfill
• babel-plugin-transform-runtime Введение в среду выполнения babel-plugin-transform

npm install --save-dev babel-polyfill babel-plugin-transform-runtime
Внедрение зависимостей производственной версииnpm install --save babel-runtimeпройти через.babelrcдобавить конфигурацию

{
    "presets": [
        "env"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

babel-polyfillЕго необходимо настроить в веб-пакете.Следующее будет говорить

4. Настроим вебпак:

Создайтеsrc/bundleПапка, в которой мы храним/генерируем код
Создайтеwebpack.config.jsфайл как файл конфигурации для веб-пакета
pathВстроенный для node.js, используемый для обработки путей,__dirnameявляется глобальным свойством node.js, представляющим текущий путь.
Добавьте babel-polyfill к вашему входному массиву для использования
Файл конфигурации js должен быть экранирован babel

const path = require('path');
module.exports = {
    //entry为入口,webpack从这里开始编译
    entry: [
        "babel-polyfill",
        path.join(__dirname, './src/index.js')
    ],
    //output为输出 path代表路径 filename代表文件名称
    output: {
        path: path.join(__dirname, './bundle'),
        filename: 'bundle.js'
    },
    //module是配置所有模块要经过什么处理
    //test:处理什么类型的文件,use:用什么,include:处理这里的,exclude:不处理这里的
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: path.join(__dirname , 'src'),
                exclude: /node_modules/
            }
        ]
    },
};

Хорошо, давайте попробуем, вsrcсоздан вtext-0.js text-1.js text-2.js index.jsСодержание:

export const Text0 = "小明";

export const Text1 = "在公司";

export const Text2 = "写代码";

import {Text0} from './text-0.js';
import {Text1} from './text-1.js';
import {Text2} from './text-2.js';

const textFun = (...arg) => {
    let P = document.createElement("p");
    P.innerHTML = arg.join(" ");
    document.getElementById('root').appendChild(P);
}
textFun(Text0,Text1,Text2);

5. Используйте веб-пакет

консольный вводnpx webpack --config webpack.config.js что такое нпкс
Упакуйте файлы в соответствии с webpack.config.js
подождите, что случилосьWARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/Получилось позволить нам настроить режим разработки или производства
существуетwebpack.config.jsнастройки

mode: 'development'

Для удобства использования мыpackage.jsonДобавьте команду упаковки webpack, чтобы нам было проще использовать и модифицироватьscriptпункт

"scripts": {
    "build": "npx webpack --config webpack.config.js"
 },

Таким образом, чтобы запустить снова, мы напрямую вводимnpm run build
Файл js упакован, давайте создадим html-страницу, чтобы увидеть эффект, вbundleсоздать папкуindex.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <div id='root'></div>
        <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
    </body>
</html>

Обратите внимание, что здесь написан тег script, чтобы представить bundle.js
Откройте файл html, чтобы увидеть эффект

Если вы хотите увидеть упакованный файл js, вы можетеwebpack.config.jsдобавить вdevtoolАтрибутыконфигурация свойства
Если изображение простое, настройте его напрямуюdevtool: ''Вот и все.

3. Обработка меньшего количества файлов

1. Установите и обработайте загрузчик, связанный с CSS

npm install --save-dev css-loader style-loader
css-loaderПозволяет импортировать css,style-loaderМожно вставить css в виде стиля

2. Установите менее связанные

npm install --save-dev less less-loader

3. Установкаpostcssа такжеpostcss-cssnextдобавить префикс браузера

npm install --save-dev postcss-loader postcss-cssnext
Создайтеpostcss.config.jsдобавьте следующий код

module.exports = {
    plugins: {
        'postcss-cssnext': {}
    }
}

я пытаюсь здесьautoprefixerПлагин не работает, но может зависеть от других пакетов.

4. Настройте веб-пакет

существуетwebpack.config.js -> module -> rulesдобавить конфигурацию
Порядок обработки справа налевоless -> postcss -> css -> style

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

4. Плагины

1. Создайте HTML-плагин

Установить плагин
npm install --save-dev html-webpack-pluginнастроитьwebpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
    new htmlWebpackPlugin({
        filename: "index.html",  //打包后的文件名
        template: path.join(__dirname , "./src/index.html")  //要打包文件的路径
    })
],

существуетsrcсоздать папкуindex.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    </head>
    <body>
        <div id='root'></div>
    </body>
</html>

Полное объяснение использования html-webpack-plugin
удалятьbundleВсе файлы в папке
повторный показnpm run buildПосмотрим на эффект

2. Создавайте плагины CSS

Установите плагин (в настоящее время должен быть @next)
npm install --save-dev extract-text-webpack-plugin@next
добавить конфигурациюwebpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
module: {
    rules: [
        ...
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'postcss-loader', 'less-loader']
            })
        }
    ]
},
plugins: [
    ...
    new ExtractTextPlugin({
        filename: 'index.css'
    }),
],

3. Очистите плагин файла пакета

Имя пакета, напечатанное приведенным выше кодом, всегда одно и то же, что может легко вызвать проблемы с кэшированием.
мы вwebpack.config.jsвнести некоторые изменения
outoupвнизfilename: 'bundle.js'дляfilename: 'bundle.[hash:8].js'
plugins -> ExtractTextPluginвнизfilename: 'index.css'дляfilename: 'index.[hash:8].css'
Проблема кэширования решена, но каждый раз генерируются файлы с разными именамиbundleВ папке все больше и больше вещей, и нам нужен плагин, чтобы очистить это.
Установить плагинnpm install --save-dev clean-webpack-plugin
Исправлятьwebpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
...
plugins: [
    ...
    new CleanWebpackPlugin(['bundle'])
]

====== 2018.09.26 update ======

4. Плагин сжатия кода

npm install uglifyjs-webpack-plugin -DУстановите плагин сжатия кода
Исправлятьwebpack.config.js

const uglify = require('uglifyjs-webpack-plugin');
...
plugins: [
    ...
    new uglify()
]

5. Извлеките публичный js

существуетwebpack.config.jsдобавить в

output: {
    ...
    chunkFilename: '[name].[chunkhash:8].js'
},
...
optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'common',
                chunks: 'all'
            }
        }
    }
},

Справочная статьяwebpack4 splitChunksPlugin && runtimeChunkPlugin конфигурация разные примечания

6. конфигурация webpack-dev-сервера

Установитьwebpack-dev-server
npm install --save-dev webpack-dev-server webpack.config.jsдобавить конфигурацию

...
devServer: {
    contentBase: path.join(__dirname, 'bundle'),  //启动路径
    host:'localhost',  //域名
    port: 8018,  //端口号
}

Выполнение заказаnpx webpack-dev-server --config webpack.config.js
Добавлено для удобстваpackage.jsonВ добавим --color (цвет) --progress (прогресс) --hot (горячая загрузка)

"scripts": {
    "build": "npx webpack --config webpack.config.js",
    "start": "npx webpack-dev-server --config webpack.config.js --color --progress --hot"
 },

7. Соберите картинки

npm install --save-dev url-loader file-loader
webpack.config.js -> rulesДобавить конфигурацию:

{
   test: /\.(png|jpg|gif)$/,
   use: [{
       loader: 'url-loader',
       options: {
           limit: 8192  //8k一下的转义为base64
       }
   }]
}

Суммировать

На данный момент собран пакет webpack с базовыми функциями, я продолжу обновлять то, что думаю в будущем...
React может быть добавлен в будущем, а код проекта размещен вмой гитхаб
Это мой первый раз, когда я пишу статью, пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы~

====== 2018.5.13 update ======

Автор вернулся и медленно заполнил дыру

8. Модули CSS используют

использоватьCSS Modulesдля модуляции нашего CSS измените нашwebpack.config.js -> module -> rules

{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
-       use: ['css-loader', 'postcss-loader', 'less-loader'],
+       use: ['css-loader?modules&localIdentName=[local]-[hash:base64:5]', 'postcss-loader', 'less-loader']
    })
}

чтобы мы все прошлиrulesизlessИмена были хешированы
в нашемindex.lessПрисоединяйся

.module-test{
    background-color: green;
    color: blue;
}

соответствует нашемуindex.jsПрисоединяйся

//替换之前的引入
import style from './index.less';

const textFun = (...arg) => {
    let P = document.createElement("p");
    P.innerHTML = arg.join(" ");
+   P.className = style["module-test"];
    document.getElementById('root').appendChild(P);
}

бегатьnpm run build
Ну, у нас есть проблема, написанная ранее#rootТакже изменены модулями CSS, но наши#rootнаписано наindex.htmlвнутренний
мы кладем#rootИзмените это на это:global(#root)Таким образом, это не будет изменено.

====== 2018.5.20 update ======

Нет времени продолжать обновлять статью в продолжении (хочу открыть новую яму...).
Я сделал некоторые настройки для многостраничной упаковки, извлечения общей библиотеки, извлечения общего кода.
в моемgithubвнутри
Добро пожаловать в гости и попросите звезду и вилку

====== 2018.07.15 update ======

Настройки горячей перезагрузки
webpack.config.jsсерединаdevServerПрисоединяйсяhot: true
entryзапись добавленаwebpack/hot/only-dev-serverВключить горячую перезагрузку
Добавить страницы с горячей загрузкой

if (module.hot) {
    module.hot.accept();
}

Включить горячую перезагрузку

Обратите внимание, что в случае нескольких страниц, только домашняя страница может быть загружена с горячими модулями, а другие страницы не могут быть загружены.

====== 2018.07.16 update ======

плюсsource-mapМожно увидеть, какой файл ошибка в
devtool: 'source-map'

Справочная статья

Webpack4 материал
Учебник по созданию фреймворка семейства React с нуля
китайская сеть webpack
китайский веб-сайт Babel