предисловие
Привет всем, это четвертая статья об интервьюере, и их, по оценкам, будет семьдесят или восемьдесят статей с интервью (внешняя часть сложная).
В этом посте представлены основные концепции веб-пакетов и способы их использования.
Давайте начнем!
концепция
Для основных концепций веб-пакета нужно помнить только следующие четыре (если только большой парень не является инженером по настройке веб-пакета).
- Вход
- Экспорт
- loader
- плагин
-
Вход
module.exports = {
entry: './src', //单入口
// or
entry: [
'./src', //多入口
'/src2',
],
// or
entry: {
main: './src', //对象写法的单入口简写
}
//or
entry: {
app: './src/index.js', //对象写法的第三方库写法
vendors: './src/script/moment.js'
}
// or
entry: {
page1: './src/page1.js',
page2: './src/page2.js',
page3: './src/page3.js',
}
}
На самом деле запись очень проста: если webpack хочет упаковать ваш проект, в какой файл помещается основной код вашего проекта?
Например, vue, то есть src, попадает в параметр ввода, а webpack знает, куда упаковать проект.
-
output
module.exports = {
/*
output接受对象属性，参数为
filename: 打包后的文件名
path: 打包后所需导出的路径
*/
output: {
filename: 'index.js',
path: path.resolve(__dirname, '/dist')
}
// or 多入口
entry: {
app: './src/index.js',
vendors: './src/script/moment.js'
},
output: {
filename: '[name].js',
path: __dirname + 'dist'
}
}
Выход так же прост, как и вход, как следует из названия, основной код проекта запакован webpack, куда его экспортировать? Например, vue, то есть dist, поместите имя файла и путь в выходной параметр, и все готово.
-
Loader
Загрузчик имени означает загрузчик, который в основном используется для преобразования исходного кода модуля.
module.exports = {
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
Как и в приведенном выше коде, мы загружаем загрузчик ts, который поможет веб-пакету преобразовать файлы typescript в нашем проекте в файлы javascript.
-
плагин
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
Плагины — самая крутая вещь в вебпаке, если у вас возникнут проблемы с проектом, вы можете сами написать плагин и импортировать его в вебпак, что идеально.
Используйте webpack в своем проекте
Допустим, у нас есть небольшой проект и мы хотим дополнительно оптимизировать загрузку, сжать код и т.д., мы можем сами написать элемент конфигурации вебпака.
Во-первых, у нас есть проект, который использует typeciprt и scss, и ему нужно использовать gzip для сжатия кода, мы можем настроить его следующим образом.
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
//入口，出口如上面的教程，只要确定你的主要代码文件和你编译后倒出的位置就可以。
entry: './pages',
output: {
filename: 'index',
path: path.resolve(__dirname, '/dist')
},
moludes: [
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader" // 将 Sass 编译成 CSS
}
]
},
{
test: /\.ts$/,
use: [
{
loader:"ts-loader" // 将ts文件编译成javacsript
}
]
}
]
],
plugins:[
new CompressionWebpackPlugin({
asset: '[path].gz[query]', //替换文件路径和名字
algorithm: 'gzip',//开启压缩
test: new RegExp(
'\\.(js|css)$' //压缩js文件和css文件
),
threshold: 10240,//只处理比这个值大的资源(字节）。
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
})
]
};
Это сделано.На самом деле вебпак очень мощный.Когда будет время,буду выкладывать статьи про вебпак,типа написания загрузчиков и плагинов самому.
Подожди, кажется, опять не в тему.
Сам автор отвечает на этот вопрос так:
- Расскажите интервьюеру о четырех основных концепциях webapck и расскажите о некоторых других модулях, таких как режим, концепция графа зависимостей и т. д.
- Представьте несколько подключаемых модулей веб-пакетов, таких как сжатие gzip, как работать с модулем console.log в dev и так далее.
- Также можно рассказать о проблемах, с которыми вы столкнулись при написании плагинов или загрузчиков, и способах их решения.
Ну, что нужно сказать, закончилось.
Первая часть цикла интервью:Интервьюер: Вы знаете Callback Hell?
Вторая часть цикла интервью:Интервьюер: Есть ли разница между react и vue?
Третья часть цикла интервью:Интервьюер: Вы знаете, что такое es6?