webpack4.x

WebPack

Модуль упаковки инструментов, анализ структуры проекта, найти язык модули и расслоение плотной некоторые браузеры не могут работать как ES6 / дерзости и т.д., и преобразовать их, почему и упаковки формат, когда браузер использует;

Упаковка: множество упакованных Js файлов в один файл, и трафик, чтобы уменьшить давление на сервере;

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

Оптимизация: оптимизация проектов для повышения производительности

устанавливать

  // 新建项目文件夹，并进入
  mkdir webpack_demo
  cd webpack_demo
  //全局安装
  npm install -g webpack

  // 全局安装后还需进行一个项目目录的安装，npm安装之前先进行初始化，目的-生成package.json文件（包括当前项目依赖模块，自定义脚本任务等）
  npm n init
  // 项目目录的安装 --save-dev保存到package.json中且在dev开发中使用，生产环境中不使用；
  npm install --save-dev webpack
  // 查看webpack版本
  webpack -v
  // ps:查看webpack版本时会提示安装webpack-cli，因为此时安装的webpack版本是4.x；webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，还需要安装 webpack-cli
  npm install --save-dev webpack-cli -g

демонстрация

Установить базовую структуру проекта, строить и папку расстояние ЦСИ в корневой директории

ЦСИ: хранение кода JavaScript

расстояние: используется для хранения браузера считывает файл, пакет файла WebPack

Dist вручную создать новое index.html папки, и записывается в код
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>jspang webpack</title>
 </head>
 <body>
     <div id="title"></div>
     <script src="./bundle.js"></script>
 </body>
 </html>
Здесь bundle.js файл не введен, последующий пакет WebPack генерируется документ;

Создание файла входа в ГКЗ entry.js:
  document.getElementById('title').innerHTML='Hello Webpack';
WebPack пакет, webpack3.x упаковочный WebPack ЦСИ / entry.js ./dist/bundle.js, но webpack4.x не поддерживает упаковку,
 // 报错信息
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/configuration/mode/
Решения для того, чтобы увеличить сценарии в package.json:
"dev": "webpack --mode development",
"build": "webpack --mode production"
NPM перспектива построить main.js создать упакованный файл в папке Dist, если необходимо изменить, например, выходные bundle.js имени выходного файла, вы можете создать новый файл webpack.config.js, установить входные и выходные файлы в корневом каталоге ситуация
  const path = require('path')
  module.exports = {
      entry:'./src/entry.js',
      output:{
          path:path.resolve(__dirname, 'dist'),
          filename:'bundle.js'
      },
      mode:'development'
  }
Запуск НОЙ сборки запуска и откройте index.html в вашем браузере, чтобы увидеть Hello Webpack

Профиль webpack.config.js

webpack.config.js файлов конфигурации Webpack, файл должен вручную создать и настроить его, следующий шаблон конфигурации в корневой директории проекта:
~ ~ ~
module.exports = {
CI // запись файла
запись: { }
// файл экспорта элементов конфигурации
Вывод: {},
// модуль: Толкование CSS , например, как преобразовать изображения, сжатие
Module1: {},
// штепсель, для производства шаблонов и функций
плагинов: [],
/ / услуги по разработке WebPack конфигурации
devserver: {}
}
~~~

  // 入口文件的配置项
  entry:{
      //里面的entery是可以随便写的
      entry:'./src/entry.js'
  }

// 出口配置是用来告诉webpack最后打包文件的地址和文件名称的
output:{
    //打包的路径位置，path.resolve(__dirname,’dist’)获取项目的绝对路径
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
}

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

  const  path  =  `require`('path');

Multi-Entry - конфигурация мульти-выход

  const path = `require`('path');
  module.exports={
      // 入口文件的配置项
      entry:{
          entry:'./src/entry.js',
          // 又引入了一个入口文件
          entry2:'./src/entry2.js'
      },
      // 出口文件的配置项
      output:{
          // 输出的路径，用了Node语法
          path:path.resolve(__dirname,'dist'),
          // 输出的文件名称
          // [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件
          filename:'[name].js'
      },
      // 模块：例如解读CSS,图片如何转换，压缩
      module:{},
      // 插件，用于生产模版和各项功能
      plugins:[],
      // 配置webpack开发服务功能
      devServer:{}
  }

Профиль: услуги и горячее обновление

При условии WebPack-DEV-сервер

Для выполнения WebPack-DEV-сервер первого НПМ установки WebPack-DEV-сервера -сохраняйте-DEV, а затем настроить его devServer

  // webpack.config.js
  devServer:{
          //设置基本目录结构
          contentBase:path.resolve(__dirname,'dist'),
          //服务器的IP地址，可以使用IP也可以使用localhost
          host:'localhost',
          //服务端压缩是否开启
          compress:true,
          //配置服务端口号
          port:1717
  }

contentBase: Основной сервер конфигурации с беговыми дорожками, для нахождения адреса упакованных;

хост: адрес службы работает, рекомендуется использовать IP-машины;

сжатия: выбор сервера сжатия обычно устанавливается на;

Услуги по эксплуатации портов;: порт

  // --save-dev 本地安装并保存到package.json
  npm install webpack-dev-server --save-dev

  // package.json 
  "devDependencies": {
    "webpack-dev-server": "^3.8.0"
  }

Затем добавьте в package.json папку команд сценариев:

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

Запуск НПМ запуска сервера, после успешного открытия браузера для HTTP: // локальный: 1717 / index.html вы можете увидеть соответствующее содержимое

После того, как НПЙ запустить сервер запускается, то есть механизм контроля (называемые также часы). Она может контролировать нас модифицировать исходный код, и дают нам немедленно обновлены в браузере.

WebPack пакета webapck-DEV-сервер запускает сервер разработки, в то время как другие файлы, когда запись файла или изменить запись файла введена WebPack автоматически компилирует файл ввода, а затем обновить всю страницу. пс: HTML или изменить стиль не будет автоматически обновлять страницу, вам необходимо обновить вручную, чтобы увидеть результаты. окна

Html не решает проблему освежающего изменения: использование плагина НОЙ установки --save-DEV HTML-WebPack-плагин

  // webpack.config.js

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins:[
        new HtmlWebpackPlugin({template: './dist/index.html'})
    ],

Модуль: CSS упаковки файлов

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

Тест: выражение для расширения обработки согласования документов;

использовать: имя загрузчика, имя модуля будет использоваться;

включения / исключение: Файл должен быть обработан вручную добавлен (папка) или блок не обрабатывается (папка) (по желанию);

запрос: предоставляет дополнительные опции настройки (по желанию) в качестве погрузчиков;

В / ЦСИ создать папку CSS, файл и построить index.css

  #title{
      font-size: 20px;
      color:red;
  }
  body{
      background-color:gainsboro;
  }

После того как файл CSS установлен, необходимо ввести на вход файл, он может быть упакована, введенный здесь в entry.js. /src/entery.js добавил в первой строке кода:

  import css from './css/index.css';

Используйте CSS файл парсинг загрузчик, стиль-загрузчик (CSS для обработки файла (URL) и т.д.), и загрузчик-CSS (CSS вставляется в тег странице стиля) НПЙ установить стиль-загрузчик --save-DEV НОЙ установки - копи-устр CSS-погрузчик

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

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

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

пс: на этот раз, чтобы автоматически изменить CSS обновления, эти три может быть записана

Вставные конфигурации: Конфигурация сжатия JS

uglifyjs-WebPack-плагин (плагин сжатия JS был передан уродовать WebPack интегрирован, без необходимости устанавливать снова.

const uglify = `require`('uglifyjs-webpack-plugin');

plugins:[
        new uglify()
    ],

пс: devServer и сжатие JS приводят к конфликту в этой ошибке во время выполнения

Вставные конфигурации: публиковать HTML-файлы

devServer и сжимают конфликт расслоение плотной

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

Html файл расстояние ниже вырезать в файл каталога ЦСИ и удалить введенные JS, WebPACK автоматически приведет
webpack.config.js включены HTML-WebPack-плагин плагин и установить НПМ установить --save-DEV HTML-WebPack -plugin

  const htmlPlugin= require('html-webpack-plugin');

Вставные webpack.config.js быть сконфигурированы в плагинов в

  new htmlPlugin({
              minify:{
                  removeAttributeQuotes:true
              },
              hash:true,
              template:'./src/index.html'
            
  })

преуменьшать: HTML файл сжат, removeAttrubuteQuotes атрибут, чтобы удалить двойные кавычки.

Хэш: есть Js кэш для того, чтобы осуществить разработку, так что хэш-соединение, которое может эффективно предотвратить кэш JS.

шаблон: шаблон HTML, чтобы упаковать путь и имя файла.

Webpack используется в терминале, в упаковке. Можно увидеть файл index.html был упакован в наш каталог DIST и JS файлы и автоматически вводит запись
пакет HTML - файл может эффективно различать каталог для разработки и производство каталогов, в конфигурации WebPack быть ясно , с какой конфигурацией в производственной среде, которая сконфигурирована среда разработки, избежать конфликтов конфигурационных оба сред

CSS в обработке изображений

Новая папка ГИМ в каталоге Src, введенная в файле index.html картинки в ЦСИ, запустите ошибку, нерешительности загрузчика, установить файл-загрузчик и загрузчик-URL
НОЙ установку --save-DEV-файл URL-погрузчик погрузчик

файл-загрузчик: ссылка путь для решения проблемы, введение CSS фона, WebPack каждый модуль будет упакован в один файл, в стиле относительного URL HTML пути входа вместо относительно исходного файла CSS находится, и приведет к введению изображения не удалось, файл-загрузчик решение может быть использовано, файл-загрузчик может анализировать URL-адрес проекта включены, в зависимости от конфигурации изображения могут быть скопированы в соответствующий путь, пакетированный файл модифицирован ссылочный путь, чтобы указать на правильный файл

URL-погрузчик: HTTP много фотографий будут посылать много запросов, снизить производительность страницы, вы можете использовать URL-погрузчик разрешенный. Изображение кодирования URL-загрузчик будет введено для генерации dataURI, что эквивалентно, чтобы перевести данные в строку символов (base64), затем упаковываются в файл символы, поэтому нужно только ввести этот документ будет иметь возможность доступа к изображениям. Если изображение является большим, потребляет эффективность кодирования, URL-погрузчик обеспечивает ограничение параметр меньше, чем файл байт в DataURI, больше, чем использование файл-загрузчик для копирования

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

 //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

тест :. / (PNG | JPG | GIF) / соответствующий файл изображения суффикс имени.

Применение: параметры конфигурации определяются с помощью загрузчика и загрузчик.

ограничение: файл меньше меченого формате 500000B Base64, писать JS.

1. Размер файла меньше предельный параметр, URL-загрузчик будет введена в файл DataURL (формат Base64);

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

CSS отделены от пути к обработке изображений

JavasScript отделены от кода CSS,

Как бороться с изолированным путем к изображению в CSS неправильного вопросе.

CSS分离: экстракт текста WebPack-плагин НПМ установить --save-DEV экстракт текста WebPack-плагин
~~~
Const extractTextPlugin = требуется ( "экстракт-текст-WebPack-плагин");
//设置плагинов
новый extractTextPlugin ( "/ CSS / index.css")

// здесь /css/index.css путь разделяется положение. После того, как эта конфигурация будет завершена, код обертки: также изменить наш оригинальный стиль-загрузчик и CSS-погрузчик.
Module1: {
правила: [
{
Test: /.css$/,
использование: extractTextPlugin.extract ({
запасной вариант: "стиль-Loader",
используйте: "CSS-Loader"
})
}, {
Test :. / (PNG | JPG | GIF) /,
использование: [{
Loader: 'URL-Loader',
Опции: {
предел: +500000
}
}]
}
]
},
~~~

Фото проблема путь:
publicPath: есть Варианты вывода webpack.config.js файл, основная роль заключается в решении статического пути к файлу.
Перед началом лечения мы webpack.config.js заявление над объектом, называется веб - сайт

var website ={
    publicPath:"http://本机或devServer配置的ip:1717/"
}

Затем ссылки publicPath свойства этого объекта в параметрах вывода.

//出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js',
        publicPath:website.publicPath
    },

Обработка HTML фотографии

HTML-withimg-погрузчик может быть много мы вводим изображения в HTML

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

Может использоваться непосредственно НПМ команды запуска сборки, т.е. используемого глобально WebPack полного пакета;

Как размещать фотографии в указанной папке: параметр конфигурации URL-погрузчик

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:5000,
                       outputPath:'imgs/',
                   }
               }]
            }
          ]
    },

OutputPath: «ГИМ /», если размер изображения меньше , чем предельное значение, изображение , сформированное в формате base64, метка не генерирует расст папки ГИМ, если изображение не превышает предельное значение, не использование обработки изображений для создания строки , вместо того чтобы использовать файл-загрузчик способ для копирования фотографий, в это время будет создавать папки ГИМ и настроить эталонное изображение пути;
PS: если не установлен предел, предел приходит со значениями по умолчанию

HTML-withimg-погрузчик решить проблему введения метки в HMTL файл НПМ установить HTML-withimg-погрузчик --save

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

Упаковка и отдельный файл меньше

НПМ установить --save-DEV меньше НПМ п установить --save-DEV менее погрузчик
погрузчик配置:

  {
      test: /\.less$/,
      use: [{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
              loader: "css-loader" // translates CSS into CommonJS
          }, {
              loader: "less-loader" // compiles Less to CSS
          }]
  }

// 分离
{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

Упаковка и разделение файлов SASS

НПМ н установить --save-DEV-узел дерзость NPM установить --save-DEV Сасс-погрузчик

{
    test: /\.scss$/,
    use: [{
         loader: "style-loader" // creates style nodes from JS strings
        }, {
         loader: "css-loader" // translates CSS into CommonJS
        }, {
        loader: "sass-loader" // compiles Sass to CSS
     }]
}

// 把SASS文件分离
{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

Не забудьте введение Sass файлов entery.js в.

Автоматическая обработка префикса атрибут CSS3

// 属性前缀
-webkit-transform: rotate(45deg);
        transform: rotate(45deg);

Совместимость браузера, добавив -webkit, -ms, -o, -moz эти префиксы. PostCSS является платформой обработки CSS, это может помочь CSS для достижения большей функциональности, например, префикс функций ,
которые необходимо установить два пакета postcss-погрузчик и autoprefixer (автоматически добавит префикс плагина)
НПМ установить --save-DEV postcss autoprefixer -loader
postCSS рекомендуется в корневой директории проекта (и webpack.config.js на том же уровне), создание postcss.config.js файла

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

{
      test: /\.css$/,
      use: [
            {
              loader: "style-loader"
            }, {
              loader: "css-loader",
              options: {
                 modules: true
              }
            }, {
              loader: "postcss-loader"
            }
      ]
}

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
    
}

Исключите неиспользованные CSS

Использование PurifyCSS CSS может значительно уменьшить избыточность npmn я -D purifycss-WebPack purifycss
необходимо синхронизировать шаблон проверки HTML, необходимо ввести объект узла с помощью Glob. Glob purifycss-WebPack включены в webpack.config.js заголовка файла
сопз Требовать Glob = ( 'Глоб');
Const = PurifyCSSPlugin Требовать ( "purifycss-WebPack");

plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
 
]

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

Webpack увеличить поддержку Вавилонского

Бабель несколько модульное пакет, его основная функция находится в НОМ под названием Бабель-основной пакет, WebPack может соединить свои различные пакеты , используемые для каждой функции или расширений , что вам нужно, вам нужно будет установить отдельный пакет (наиболее часто используемый в аналитическом ES6 Бабель-запрограммированного-es2015 JSX пакета и синтаксический анализ пакета Babel-запрограммированная реагируют).
cnpm установить --save-DEV Бабель-жильный Бабель-погрузчик Бабель-запрограммированного-es2015 Бабель-запрограммированным реагирует

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

Теперь официально рекомендовал столпотворение-предустановленной ENV, НУЮ н установить --save-DEV Бабель-предустановленный-ENV ,
а затем изменить .babelrc в конфигурационном файле. На самом деле, до тех пор , как предыдущий es2015 в окр на него.

{
    "presets":["react","env"]
}

пс: экстракт текста WebPack-версия плагина я не знаю, что эта проблема до сих пор не нормально ах

Ссылки и благодарности:

https://jspang.com/posts/2017/09/16/webpack3.html (настоятельно рекомендуется ах )
https://www.jianshu.com/p/c094e42b0bc2
https://blog.csdn.net/xum222222/article / подробности / 79889793

webpack4.x использование