脚本宝典收集整理的这篇文章主要介绍了webpack学习(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一.entry
entry是webpack打包的入口配置,entry对应的值可以是字符串,数组,对象;单入口可以使用字符串、数组、对象,多入口配置则必须使用对象的方式
二.output
output是webpack打包的出口配置,可以指定文件输出的路径path和文件名filename;多入口起点的时候,出口文件名配置需要以占位符来确保每个文件具有唯一的名称,eg:filename='[name].js'
三.mode
模式配置告知webpack使用相应的配置优化,支持development,PRoduction;webpack打包的时候可以使用webpack --mode=production进行参数传递。
四.loader
loader 用于对模块的源代码进行转换。webpack默认只支持js,json文件格式。对于css、@L_126_6@、图片、vue、jsx等webpack都不能识别,所有需要引入对应的loader对对应格式的文件进行转换以便webpack来识别。loader支持链式调用,调用顺序由下到上,由右到左
五.plugins
插件目的在于解决 loader 无法实现的其他事。
六.webpack项目搭建(vue)
1)npm i webpack webpack-cli -D安装webpack依赖。
安装完了可以对js文件进行解析,但是却不能解析es6,要解析es6就需要借助babel。
2)npm babel-loader @babel/core @babel/preset-env -D安装babel对应的依赖。
在目录下创建.babelrc文件,配置preset
{
"presets": [
"@babel/preset-env"
]
}
配置babel-loader
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
}
]
}
3)npm i css-loader style-loader less less-loader -D 安装css对应loader
{
test:/.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
]
}
这个方式css和js是编译打包到一个文件里面,css样式以style的方式插入head中,
但是大多数情况我们是希望js和css分别独立打包,这时我们就需要引入插件
mini-css-extract-plugin把css样式抽离出来。
npm i mini-css-extract-plugin -D安装插件。
在webpack.config.js引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
loader就不能使用style-loader需引用MiniCssExtractPlugin.loader
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
npm i optimize-css-assets-webpack-plugin -D引入css压缩插件
const OptimizeCss = require('optimize-css-assets-webpack-plugin');
配置css压缩plugins
new OptimizeCss({
assetNameRegExp: /.css$/g,
cssProcessor: require('cssnano'),
}),
4)npm i vue-loader vue-template-compiler -D安装vue依赖loader
{
test: /.vue$/,
use: 'vue-loader'
}
引入vue-loader plugin:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin(),
5)npm i htML-webpack-plugin -D 安装html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html', // 打包之后的html
chunks: ['app'], // 依赖的文件
inject: true,
minify: {
html5: true,
removeAttributeQuotes: true,
collapseWhITespace: true,
}
})
6)热更新
以上是脚本宝典为你收集整理的webpack学习(一)全部内容,希望文章能够帮你解决webpack学习(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。