安装
安装本地的webpack
cnpm i webpack webpack-cli -D
核心概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
配置webpack
let path=require('path')
module.exports = {
//入口 从哪个地方开始打包
entry: './src/index.js‘,
//出口
output:{
//加个哈希戳每次都不一样 只显示8位
filename:'bundle.[hash:8].js',
// filename:'bundle.js',//打包后的文件名
//path.resolve->将相对路径解析为绝对路径(要导入path模块)
//__dirname 以当前目录为基准 不写也可以
path:path.resolve(__dirname,'dist'),//放到哪里去,路径是一个绝对路径
},
}
loader
loader可以打包非js文件(.css等 )
loader有两个属性
- test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。
首先要先安装loader
cnpm i css-loader style-loader less-loader -D
module:{//模块
//loader
rules:[
//规则 css-loader 解析@import语法
//style-loader 他是把css插入到head的标签中
//loader的特点 希望单一
//loader的用法 字符串只用一个loader
//多个loader需要一个数组 []
//loader的顺序 默认是从右向左执行 从下向上
//loader还可以写成 对象方式
// {test:/\.css$/,use:['style-loader','css-loader']},
{
//还可以处理Less文件
test:/\.css$/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //styLe标签插到顶部
}
},
'css-loader']
},
{
//还可以处理Less文件 sass stylee node-sass
test:/\.less$/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //styLe标签插到顶部
}
// options:{}
},
'css-loader',//@import 解析路径
'less-loader']//把less->css]
}
]
}
plugins
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
首先仍需要通过npm安装插件
let HtmlWebpackPlugin=require('html-webpack-plugin')
导入插件
let HtmlWebpackPlugin=require('html-webpack-plugin')
简单使用
plugins:[//数组放着所有的webpack插件
new HtmlWebpackPlugin({
template:'./src/index.html',//打包的模板
filename:'index.html',//输出文件的文件名称,默认为index.html
minify:{//最小化操作
removeAttributeQuotes:true,//删除""
collapseWhitespace:true,//折叠空行
},
hash:true//哈希戳
})
]
完整代码
let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
console.log(path.resolve('dist'))
module.exports={
devServer:{//开发服务器的配置
port:2233,//端口号
progress:true,//进度条
contentBase:'./dist' ,//作为静态服务的目录,
compress:true
},
mode:'production',//模式 默认是两种production developnment
entry:'./src/index.js',//入口 从哪个地方开始打包
//出口
output:{
filename:'bundle.[hash:8].js',//加个哈希戳每次都不一样 只显示8位
// filename:'bundle.js',//打包后的文件名
//path.resolve->将相对路径解析为绝对路径
//__dirname 以当前目录为基准 不写也可以
path:path.resolve(__dirname,'dist'),//放在哪里去,路径不许是一个绝对路径
},
module:{//模块
//loader
rules:[//规则 css-loader 解析@import语法
//style-loader 他是把css插入到head的标签中
//loader的特点 希望单一
//loader的用法 字符串只用一个loader
//多个Loader需要一个数组 []
//loader的顺序 默认是从右向左执行 从下向上
//loader还可以写成 对象方式
// {test:/\.css$/,use:['style-loader','css-loader']},
{
//还可以处理Less文件
test:/\.css$/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //styLe标签插到顶部
}
},
'css-loader']
},
{
//还可以处理Less文件 sass stylee node-sass
test:/\.less$/,
use:[
loader:'style-loader',
'css-loader',//@import 解析路径
'less-loader'
]
//把less->css
}
]
},
{
//还可以处理Less文件 sass stylee node-sass
test:/\.less$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',//@import 解析路径
'postcss-loader',
'less-loader'
]//把less->css]
}
]
},
plugins:[//数组放着所有的webpack插件
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
minify:{//最小化操作
removeAttributeQuotes:true,//删除""
collapseWhitespace:true,//折叠空行
},
hash:true//哈希戳
})
]
}