Webpack4 материал

внешний интерфейс JavaScript CSS Webpack

What

В последние годы конструирование стало очень важным термином для фронтенд-разработки, поскольку оно придает большую жизненную силу фронтенд-разработке и высвобождает большую производительность. И webpack играет важную роль во front-end проектах, он может конвертировать код, который не знают различные браузеры, такие как es6, es7, sass, less и т.д., в языки, распознаваемые браузерами, и умеет сжимать файлы. Объединяйте, разделяйте код, объединяйте модули. . .

Why

Вчера смотрел проекты нашей компании.Хотя каждый проект использует webpack,но он имеет все версии.Webpack1,webpack2 и webpack3 должны быть. Многие плагины будут иметь проблемы или больше не смогут использоваться при обновлении версии, поэтому конфигурацию веб-пакета следует постоянно обновлять и изучать. Поэтому я думаю, что необходимо подвести итог, так уж получилось, что 25 февраля 2018 года webpack официально выпустил версию v4.0.0 под кодовым названием legato, поэтому эта статья основана на последней версии webpack4.0, чтобы объяснить общее использование. Однако на первом этапе, я думаю, необходимо рассказать о некоторых наиболее важных элементах журнала обновлений webpack4.

Update

  1. Поддержка среды: Официально объявлено, что больше не поддерживаются Node 4 и Node 6. Используется версия v8 5.0, которая поддерживает 93% синтаксиса ES6. Поскольку webpack4 использует много нового синтаксиса JS, они оптимизированы в новой версии v8.
  2. 0 Конфигурация Вдохновленный инструментом упаковки Parcel, он максимально снижает стоимость запуска проекта для разработчиков. webpack4 больше не требует webpack.config.js в качестве файла конфигурации упакованной записи, его запись по умолчанию — «./src/», а выход по умолчанию — «./dist», что действительно хорошо для небольших проектов.
  3. Веб-пакет Mode должен установить свойство режима, необязательную разработку или производство.
"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

Особенности режима разработки:

a.浏览器调试工具
b.注释、开发阶段的详细错误日志和提示
c.快速和优化的增量构建机制

Особенности производственного режима:

a.开启所有的优化代码
b.更小的bundle大小
c.去除掉只在开发阶段运行的代码
d.Scope hoisting和Tree-shaking
  1. Изменения плагина webpack4 удалил плагин CommonsChunkPlugin, который использует встроенные в API оптимизации.splitChunks и оптимизации.runtimeChunk, т.е. webpack будет генерировать для вас общие чанки по умолчанию.
  2. WebAssembly из коробки (еще не использовал)

Use

  1. элемент конфигурации
  • Entry: Entry, первый шаг в выполнении сборки Webpack начнется с Entry, который можно абстрагировать во входные данные.
  • Модуль: модуль, все является модулем в Webpack, а модуль соответствует файлу. Webpack будет рекурсивно находить все зависимые модули, начиная с настроенного Entry.
  • Чанк: блок кода, фрагмент состоит из нескольких модулей для слияния и разделения кода.
  • Загрузчик: преобразователь модулей, который используется для преобразования исходного содержимого модуля в новое содержимое по мере необходимости.
  • Плагин: плагин расширения, который внедряет логику расширения в определенное время в процессе сборки Webpack, чтобы изменить результат сборки или сделать то, что вы хотите.
  • Вывод: выведите результат после того, как Webpack пройдет серию обработок и получит окончательный желаемый код.
  1. команда запуска Выполнение webpack --mode development будет искать пакет webpack по всему миру.Если он не установлен, он сообщит вам bash: webapck: команда не найдена. решение:
  • Используйте npx, т.е. разработку веб-пакета npx (инструмент, поддерживаемый npm версии 5.2.0)Подробное введение
  • Настройте скрипты в package.json
"scripts": {
    "build": "webpack --mode development",
    "dev": "webpack-dev-server --open --mode development"
  },
  1. Мы уже настроили webpack-dev-server в приведенных выше скриптах, который является сервером во время разработки, все упакованные файлы помещаются в память, которая может быть обновлена ​​в горячем режиме, заменена в горячем режиме и т.д., чтобы облегчить нашу разработку.
npm i webpack-dev-server ---save-dev

Полная простая конфигурация:

const path = require('path');
module.exports = {
    entry:path.resolve(__dirname,'src','index.js'),
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    devServer:{//配置此静态文件服务器，可以用来预览打包后项目
        contentBase:path.resolve(__dirname,'dist'),//开发服务运行时的文件根目录
        host:'localhost',//主机地址
        port:9090,//端口号
        compress:true//开发服务器是否启动gzip等压缩
    }
}

4. Обработка файла CSS. Загрузчик css используется для анализа и обработки пути URL-адреса в файле CSS. Чтобы превратить файл CSS в модуль, загрузчик стиля может превратить файл CSS в тег стиля и вставить его в голова. Порядок выполнения выполняется справа налево, сначала заходим в css-loader, потом в style-loader.

npm i style-loader css-loader ---save-dev
rules: [
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]

5. Вывод html

npm i html-webpack-plugin ---save-dev
plugins:[
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'src','index.html'),//模板
            filename:'index.html',
            hash:true,//防止缓存
            minify:{
                removeAttributeQuotes:true//压缩 去掉引号
            }
        })
],

6. Извлеките файл css как отдельный файл, вместо того, чтобы напрямую упаковывать его в js, как указано выше, обратите внимание, что extract-text-webpack-plugin должен загрузить следующую версию, иначе он не поддерживает webpack4.

npm install --save-dev extract-text-webpack-plugin@next
 rules: [
            {
                test:/\.css$/,
                // loader:['style-loader','css-loader']
                use:ExtractTextWebapckPlugin.extract({
                    use:'css-loader'
                })//不再需要style-loader

            }
        ]
new ExtractTextWebapckPlugin('css/index.css')
  1. sass меньше обрабатывает файлы
npm i less less-loader ---save-dev
npm i node-saas sass-loader ---save-dev
const lessExtract = new ExtractTextWebapckPlugin('css/less.css');
const sassExtract = new ExtractTextWebapckPlugin('css/sass.css');
 {
    test:/\.less$/,
    use:lessExtract.extract({
        use: ['css-loader','less-loader']
    })
},
{
    test:/\.scss$/,
    use: sassExtract.extract({
        use:['css-loader','sass-loader']
    })
}
  1. бабель конвертировать js
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 --save-dev
{
    test: /\.js/,
    use: {
        loader: 'babel-loader',
        query: {
            presets: ["env", "stage-0"]
        }
}
  1. Три часто используемых способа загрузки изображений
  • Представлено в css
body{
    color: red;
    background: url(./images/002.jpg) no-repeat;
}
  • js динамический импорт
let imgSrc = require('./images/002.jpg');
let img = new Image();
img.src = imgSrc;
document.body.appendChild(img);
  • HTML-тег img
  <img src="./images/002.jpg" alt="">

Первые два используют file-loader (для решения проблемы импорта путей к изображениям в CSS и других файлах) url-loader (когда изображение маленькое, изображение будет в кодировке BASE64, а когда оно больше настроенного параметра limit, используйте загрузчик файлов для копирования)

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

Третий использует html-withimg-loader для обработки

npm i html-withimg-loader --save-dev
{
    test:/\.(html|htm)$/,
    use:'html-withimg-loader'
}
  1. проблема множественного входа Шаблон массива не является многократным, и в конце записи генерируется только один js.
entry: [path.resolve(__dirname, 'src', 'index.js'),path.resolve(__dirname, 'src', 'base.js')],

Правильный способ записи нескольких записей — в виде объектов. Следующие записи создадут два файла js.

entry:{
        index:'./src/index.js',
        base:'./src/base.js'
},

Модули загрузки html, соответствующие нескольким записям, различаются фрагментами.

 new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'src','index.html'),
    filename:'index.html',
    chunks:['index'],
    hash:true,//防止缓存
    minify:{
        removeAttributeQuotes:true//压缩 去掉引号
    }
}),
new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'src','index.html'),
    filename:'base.html',
    chunks:['base'],
    hash:true,//防止缓存
    minify:{
        removeAttributeQuotes:true//压缩 去掉引号
    }
}),
  1. Добавление двух файлов требует внедрения сторонней библиотеки, например lodash.На данный момент нам нужно импортировать ее внутрь каждого модуля.Поэтому при упаковке каждый репозиторий будет упаковывать в него lodash,и файл станет очень большим , В это время мы можем превратить lodash в файл ввода, а затем выставить переменные через webpack.ProvidePlugin и ссылаться на них фрагментами в html следующим образом:
entry:{
        index:'./src/index.js',
        base:'./src/base.js',
        vendor:'lodash'
} 
new webpack.ProvidePlugin({
            _:'lodash'
})
new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'src','index.html'),
    filename:'base.html',
    chunks:['base','vendor'],
    hash:true,//防止缓存
    minify:{
        removeAttributeQuotes:true//压缩 去掉引号
    }
}),

Мы также можем выставить объект глобально через expose-loader.

let _=require('expose-loader?_!lodash');
  1. watch прослушивает изменения упаковки файла и автоматически упаковывает, когда файл изменяется
watch: true,
watchOptions: {
    ignored: /node_modules/, //忽略不用监听变更的目录
    aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫米内重复保存不打包
    poll:1000 //每秒询问的文件变更的次数
},
  1. разрешить синтаксический анализ (обычно используется, вы можете не писать суффикс имени файла)
resolve:{
    extensions: ["",".js",".css",".json"]
},

14. Сожмите js, уменьшите размер выходного JS-файла, ускорьте загрузку, сэкономьте трафик и зашифруйте запутанный код.

npm i uglifyjs-webpack-plugin --save-dev
直接new一下即可
new UglifyjsWebpackPlugin()

резюме

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

Категории