Необходим для разработки webpack4

Node.js JavaScript CSS Webpack
Необходим для разработки webpack4

В первую очередь рекомендуется использовать webpack4Версия узла выше 8.5Потому что он совместим с NPX под новой версией NPM, в CMDnode -vПроверьте версию узла.

1. Что такое веб-пакет

WebPack можно рассматривать как упаковщик модулей: он анализирует структуру вашего проекта, находит модули JavaScript и другие языки расширения (Scss, TypeScript и т. д.), которые браузеры не могут запускать напрямую, и упаковывает их в подходящий формат для браузера. использовать.

Создание — это преобразование исходного кода в исполняемый код JavaScript, CSS и HTML, который публикуется в Интернете, включая следующие.

  • преобразование кода: TypeScript компилируется в JavaScript, SCSS компилируется в CSS и т. д.
  • оптимизация файлов: Сжимайте код JavaScript, CSS, HTML, сжимайте и объединяйте изображения и т. д.
  • разделение кода: извлеките общий код нескольких страниц, извлеките код, который не нужно выполнять на первом экране, и разрешите ему асинхронную загрузку.
  • слияние модулей: В модульном проекте будет много модулей и файлов, и для объединения модулей в один файл потребуется функция сборки.
  • Автоматическое обновление: Отслеживайте изменения локального исходного кода, автоматически перестраивайте и обновляйте браузер.
  • проверка кода: Перед отправкой кода на склад необходимо проверить, соответствует ли код спецификации и проходит ли юнит-тест.
  • автоматическая публикация: после обновления кода код онлайн-релиза создается автоматически и передается в систему выпуска.

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

2. Инициализируйте проект

  • Инициализировать package.json
npm init -y 

// package.json 文件中
"scripts": {
    "build": "webpack  --profile --progress --colors --display-error-details",
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details"
  },

  • цвет Результат вывода окрашен, например, шаги, которые занимают много времени, будут отображаться красным цветом.

  • профиль выходных данных о производительности, вы можете увидеть, сколько времени занимает каждый шаг

  • progress Выводит ход текущей компиляции в виде процентов.

  • display-modules По умолчанию модули в node_modules будут скрыты, добавление этого параметра может отображать эти скрытые модули.

  • display-error-details выводит подробную информацию об ошибке

  • Установить глобально

npm install webpack -g
  • локальная установка
npm install webpack webpack-cli -D//-D是指开发环境需要，上线不需要，下同；

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

3. Начните быстро

3.1 Основные концепции веб-пакета

  • Вход: вход, первый шаг выполнения сборки Webpack начнется с Entry, которую можно абстрагировать во входные данные.
  • Модуль: Модуль, В Webpack все является модулем, а модуль соответствует файлу. Webpack будет рекурсивно находить все зависимые модули, начиная с настроенного Entry.
  • Чанк: блок кода, фрагмент состоит из нескольких модулей для слияния и разделения кода.
  • Загрузчик: Преобразователь модулей, который используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.
  • Плагин: плагин расширения, внедрите логику расширения в определенное время в процессе сборки Webpack, чтобы изменить результат сборки или сделать то, что вы хотите.
  • Выход: результат вывода, который выводит результат после того, как Webpack прошел ряд обработок и получил окончательный желаемый код.

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

npm install webpack webpack-cli -D
  • создать источник
  • создать расстояние
    • Создать index.html
  • Файл конфигурации webpack.config.js
    • entry: адрес файла записи конфигурации
    • вывод: адрес файла экспорта конфигурации
    • модуль: модуль конфигурации, в основном используемый для настройки загрузчика различных файлов
    • плагины: настроить плагины
    • devServer: настроить сервер разработки
// 基于node的 遵循commonjs规范的
let path = require('path');//node的模块
module.exports = {
  entry:'./src/index.js', // 入口
  output:{
    filename:'build.js',
    // 这个路径必须是绝对路径
    path: path.resolve('./dist')
  }, // 出口
  devServer:{
    contentBase:'./dist',
    port:8080,
    compress:true,// 服务器压缩
    open:true,// 自动打开浏览器
    // hot:true//热更新
  },// 开发服务器
  module:{}, // 模块配置
  plugins:[], // 插件的配置
  mode:'development', // 可以更改模式
  resolve:{}, // 配置解析
}
// 在webpack中如何配置开发服务器 webpack-dev-server

4. Настройте сервер разработки

npm i webpack-dev-server –D
  • contentBase настраивает корневой каталог файла среды выполнения службы разработки.
  • хост: адрес хоста, где сервер разработки прослушивает
  • сжатие Разрешает ли сервер разработки сжатие, такое как gzip
  • порт: порт, который прослушивает сервер разработки
+ devServer:{
+        contentBase:path.resolve(__dirname,'dist'),
+        host:'localhost',
+        compress:true,
+        port:8080
+ }//开发服务器

+  "scripts": {
+    "build": "webpack --mode development",
+    "dev": "webpack-dev-server --open --mode development "
+  }//开启本地服务 npm run dev

5. Типы входных файлов

5.1 Разовый въезд + разовый выезд

Такая ситуация встречается редко и обычно может отображаться в виде строки, например:

entry: './src/index.js',

5.2 Форма массива с несколькими входами + один выход

entry:['./src/index.js','./src/a.js']

5.1 Многократный въезд + многократный выезд

Иногда наша страница может состоять из нескольких HTML-страниц, будет несколько страниц, поэтому нам нужно несколько записей.

entry: {
        index: './src/index.js',
        main:'./src/main.js'
    },
     output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[hash].js',
            publicPath:PUBLIC_PATH
        },
        new HtmlWebpackPlugin({
                    minify: {
                        removeAttributeQuotes:true
                    },
                    hash: true,
                    template: './src/index.html',
                    chunks:['index'],
                    filename:'index.html'
                }),
                new HtmlWebpackPlugin({
                    minify: {
                        removeAttributeQuotes:true
                    },
                    hash: true,
                    chunks:['main'],
                    template: './src/main.html',
                    filename:'main.html'
                })],

6. Поддержка загрузки файлов css

6.1 Что такое загрузчик

Используя разные загрузчики, Webpack может конвертировать разные файлы в файлы JS, такие как CSS, ES6/7, JSX и т. д.

  • test: регулярное выражение, соответствующее расширению обрабатываемого файла
  • use: имя загрузчика, которое является именем модуля, который вы хотите использовать
  • include/exclude: Вручную укажите папки, которые должны быть обработаны, или закройте папки, которые не нужно обрабатывать.
  • запрос: предоставляет дополнительные параметры настройки для загрузчиков

Три способа написать загрузчик

  • use
  • loader
  • use+loader

6.2 css-loader

npm i style-loader css-loader -D

загрузчик конфигурации

    module: {
+        rules:[
+            {
+                test:/\.css$/,
+                use:['style-loader','css-loader'],//从右往左写，webpack特性
+                include:path.join(__dirname,'./src'),
+                exclude:/node_modules/
+            }
+        ]
    },

7. Поддержка изображений

7.1 Добавление изображений вручную

npm i file-loader url-loader -D
  • file-loaderРешить проблему импорта путей к изображениям в CSS и других файлах.
  • url-loaderКогда изображение маленькое, оно будет кодировать изображение в BASE64, а если оно больше параметра limit, используйте загрузчик файлов для его копирования.
let logo=require('./images/logo.png');
let img=new Image();
img.src=logo;
document.body.appendChild(img);

  {
    test:/\.(jpg|png|gif|svg)$/,
    use:'url-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
  }

7.2 Введение изображений в CSS

Вы также можете включать изображения в файлы CSS.

.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

8. Автоматически генерировать html

8.1 Что такое плагин

Плагины являются основой Wepback. Сам веб-пакет построен поверх той же системы плагинов, которую вы используете в своей конфигурации веб-пакета!

  • использование плагина
npm install 插件名 -D

Поскольку плагины — это все классы, ссылочные методы, вpluginsв массивеновое имя плагинаготовые к использованию.

8.2 Мы надеемся автоматически генерировать файлы HTML и внедрять в них сгенерированные ресурсы

npm i html-webpack-plugin -D
  • minify — сжать html-файл, removeAttrubuteQuotes — удалить двойные кавычки атрибута
  • hash Добавьте хеш, чтобы избежать кэширования при вводе выходных ресурсов
  • путь к шаблону шаблона
    plugins: [
+        new HtmlWebpackPlugin({
+       minify: {
+            removeAttributeQuotes:true
+        },
+        hash: true,
+        template: './src/index.html',
+        filename:'index.html'
    })]

9. Отдельный CSS

Поскольку загрузку CSS и JS можно распараллелить, когда файл HTML очень большой, мы можем извлечь CSS отдельно и загрузить его.Плагин mini-css-extract-plugin в webpack4 также может быть реализован, но в настоящее время существует множество ошибки и не могут быть разделены на несколько css.

npm install --save-dev extract-text-webpack-plugin@next

{
    test:/\.css$/,
    use: ExtractTextWebpackPlugin.extract({
        use:'css-loader'
    }),
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
},

plugins: [
    new ExtractTextWebpackPlugin('css/index.css'),
]

Обработка проблем с путями к изображениям

const PUBLIC_PATH='/';

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

Укажите расположение упакованного образа

use: [
    {
     loader: 'url-loader',
     options: {
       limit: 1024,
      outputPath:'images/'
     }
    }
],

Использование изображений в HTML

npm i html-withimg-loader -D

<div class="img-container "><img src="./images/logo.png" alt="logo.png"></div>

  {
+    test:/\.(html|html)$/,
+    use:'html-withimg-loader',
+    include:path.join(__dirname,'./src'),
+    exclude:/node_modules/
  }

10. Компиляция меньше и дерзче

npm i less less-loader -D
npm i node-saas sass-loader -D

@color:orange;
.less-container{
	border:1px solid @color;
}

$color:green;
.sass-container{
	border:1px solid $color;
}

const cssExtract=new ExtractTextWebpackPlugin('css.css');
const lessExtract=new ExtractTextWebpackPlugin('less.css');
const sassExtract=new ExtractTextWebpackPlugin('sass.css');

 {
                test:/\.less$/,
                use: lessExtract.extract({
                    use:['css-loader','less-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
            {
                test:/\.scss$/,
                use: sassExtract.extract({
                    use:['css-loader','sass-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },

11. Обработка префиксов свойств CSS3

Для совместимости с браузером иногда нам приходится добавлять эти префиксы -webkit,-ms,-o,-moz

  • Ядро Trident: в основном представлено браузером IE с префиксом -ms
  • Ядро Gecko: основным представителем является Firefox с префиксом -moz.
  • Ядро Presto: основной представитель Opera с префиксом -o
  • Ядро Webkit: основными продуктами являются Chrome и Safari с префиксом -webkit.
npm i postcss-loader autoprefixer -D

postcss-loader

postcss.config.js

module.exports={
	plugins:[require('autoprefixer')]
}

.circle {
+    transform: translateX(100px);

{
                test:/\.css$/,
                use: cssExtract.extract({
+                   use:['css-loader','postcss-loader']
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },

12. Побег из ES6/ES7/JSX

Babel на самом деле является платформой для компиляции JavaScript, которая может избежать ES6/ES7, React JSX для ES5.

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

{
        test:/\.jsx?$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["env","stage-0","react"]
            }
        },
        include:path.join(__dirname,'./src'),
        exclude:/node_modules/
        },

13. Как отлаживать упакованный код

webpack может автоматически дать нам через конфигурациюsource mapsдокумент,mapФайл — это способ сопоставления скомпилированного файла и исходного файла.

  • source-map генерирует файлы маппинга в отдельные файлы, самые полные и самые медленные
  • Cheap-module-source-map создает карту без сопоставления столбцов в отдельном файле.
  • eval-source-map Используйте eval для упаковки модулей исходного файла и создания полной исходной карты в том же файле.
  • исходная карта дешевого модуля-eval-source-map и упакованные аналоги JS показывают, что нет столбца сопоставления
devtool:'eval-source-map'

14. Скопируйте статические файлы

Иногда файлы, на которые нет ссылок в проекте, также необходимо упаковать в целевой каталог.

npm i copy-webpack-plugin -D

 new CopyWebpackPlugin([{
            from: path.join(__dirname,'public'),//静态资源目录源地址
            to:'./public' //目标地址，相对于output的path目录
        }]),

15. Очистите выходной каталог перед упаковкой

npm i  clean-webpack-plugin -D

new cleanWebpaclPlugin(path.join(__dirname,'dist'))

16. Сжать CSS

webpack может удалить неиспользуемый CSS

npm i -D purifycss-webpack purify-css glob

new PurifyCSSPlugin({//purifycss根据这个路径配置遍历你的HTML文件，查找你使用的CSS
  paths:require('glob').sync(path.join(__dirname,'src/*.html'))
}),

17. решить

17.1 extensions

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

resolve: {
    //自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
   extensions: [" ",".js",".css",".json"],
},

17.2 alias

Настройка псевдонимов может ускорить поиск модулей webpack.

  • Всякий раз, когда вводится модуль jquery, он будет напрямую импортировать jqueryPath вместо поиска по правилам поиска модуля из папки node_modules.
  • Нет необходимости в веб-пакете для анализа файла jquery.js
const bootstrap=path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
 +       alias: {
 +           'bootstrap': bootstrap
 +       }
    },

18. Различать переменные окружения

Многие библиотеки будут связаны с переменной среды process.env.NODE_ENV, чтобы определить, на что следует ссылаться в библиотеке. Например, некоторые библиотеки могут добавлять дополнительные журналы (log) и тесты (test), чтобы упростить отладку, когда они не используются. На самом деле, при использовании process.env.NODE_ENV === 'production' некоторые библиотеки могут оптимизировать код для конкретной пользовательской среды, тем самым удаляя или добавляя какой-то важный код. Мы можем использовать DefinePlugin, встроенный в webpack, чтобы определить эту переменную для всех зависимостей:

npm install cross-env -D

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

 plugins: [
    new webpack.DefinePlugin({
        NODE_ENV:JSON.stringify(process.env.NODE_ENV)
}),

if (process.env.NODE_ENV == 'development') {
	console.log('这是开发环境');
} else {
	console.log('这是生产环境');
}

19. Вытащить из общественных мест

optimization:{
    splitChunks:{
        cacheGroups:{
            vendor:{//抽离第三插件
                test:/node_module/,
                chunks:'initial',
                name: 'vendor',
                priority:10,//优先级
            },
            commons:{//抽离公共的js
                chunks:'initial',
                name:'commons',
                minSize: 0//只要超出0字节就生成新的公共的包
            }
        }
    }
},
  • Справа налево сначала будет упакована общедоступная часть js (например, часть, совместно используемая двумя файлами), а третья сторона (например, jquery) будет упакована первой. В это время необходимо установить приоритет, и сторонний плагин не будет упакован в публичную часть.

спасибо, что увидели конец

Категории