引入Webpack管理工具的原因
项目打包上线的时候,需要我们将ES6语法转化成ES5语法,scss语法转化成浏览器能识别的css文件,jQuery语法转化成为js文件,vue文件转化成js文件,将各种开发环境的文件压缩成压缩文件,提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack好处,当css语法前有为了兼容的前缀你记不住,webpack打包上线的时候会自动帮你添加前缀。
安装Webpack
建议项目安装,由于webpack不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。
步骤如下:
1.安装node,全局安装即可
2.进入项目
3.npm init生成package.json文件
4.npm install webpack webpack-cli --save dev(使用4以上版本才装cli)
5.如果是mac版本,应该在命令前面添加sudo
6.webpack -v
7.安装完成之后,很多需要的包会在node_modules包管理工具中,此时再用webpack -v查看webpack版本号就不好使了,因为此时webpack在项目中的node_modules文件夹中。全局查看版本找不到。
建立webpack.config.js文件
有关webpack配置的文件都需要在这里面填写
const path=require("path");
module.exports={
mode:'production',//生产环境下
mode:'development',//开发环境下
entry:{//入口配置文件
XX:'./src/index.js'
},
output:{//出口配置文件
path:path.resolve(__dirname,'./dist')
//path下有很多方法
filename:'[name].js'//文件的名字
}
module:{}//模块解读css,图片如何压缩
plugins:[],//插件用于生产模板和各项功能
devSever:{}//配置webpack开发服务功能
}
在package.json文件下配置我们的命令
"scripts":{
'build':'webpack',
}
运行命令的时候,写的是build就是npm run build
创建webpack热服务
1.安装webpack-dev-server,安装完成之后在package.json中找到devDependencies查看是否有webpack-dev-server的版本号。
2.在webpack.config.js文件中配置
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'./dist'),
//设置基本目录结构
host:'127.0.0.1',
//服务器的IP地址,也可以写localhost
port:8081,
compress:true//服务器压缩是否开启
open:true//自动打开页面
hot:true
//实时局部刷新
}
3.packjson文件中配置
"scripts":{
'build':'webpack',
'dev':'webpack-dev-server'
}
4.创建热更新最后要引入插件
在webpack.config.js文件中配置
plugins[
new webpack.HotModuleReplacementPlugin()
]
HTML打包
1.安装插件
npm install html-webpack-plugin --save dev
npm安装完成之后相当于被安装到了node_modules中,所以在使用时,应当将其引入到webpack.config.js文件中
const HtmlWebpackPlugin=require("html-webpack-plugin");
plugins[
new webpack.HotModuleReplacementPlugin(),
new webpack.HtmlWebpackPlugin({
minify:{
removeAttributeQuotes:true
//去掉属性的双引号
collapseWhitespace: true
//折叠空白区域
},
hash:true,
//为了js中有缓存效果
template:'./src/index.html'
//要打包的html模板和路径名称
})
]
多页面应用打包
SPA单页面应用
当每个html文件对应不同的js文件的时候,可以在webpack.config.js文件中,配置new webpack.HtmlWebpackPlugin中添加
{
filename:'b.html'
chunks:['index']
//对应的js文件名称
title:'index-title'
//修改html文件的title
}
CSS打包
1.在入口js文件中 import css from './css/index.css'
2.下载插件:
style-loader:用来处理css文件中的url,将url挂载到js文件中
css-loader:用来将css插入到页面的style标签中
npm install --save-dev style-loader
npm install --save-dev css-loader
3.在webpack.config.js文件中配置
module:{
rules:[
{
test:/\.css$/,
//过滤文件以.css结尾的文件 use:['style-loader','css-loader']
//利用style-loader和css-loader来解析文件
}
]
}
CSS文件打包时和js文件分离
有时我们不希望打包后的文件js和css在一个文件里,所以将其分离
1.引用插件
在webpack.config.js文件中引入
const ExtractTextPlugin=require("extract-text-webpack-plugin")
2.安装 npm install --save-dev extract-text-webpack-plugin@next
以最新版本安装
3.配置
module:{
rules:[
{
test:/\.css$/,
//过滤文件以.css结尾的文件 use:ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
//利用style-loader和css-loader来解析文件
}
]
}
plugins[
new ExtractTextPlugin("css/index.css")
]
css文件会自动关联html中
将CSS中的图片打包
1.安装npm install --save-dev file-loader url-loader
2.配置
module:{
rules:[
{
test:/\.css$/,
//过滤文件以.css结尾的文件 use:['style-loader','css-loader']
//利用style-loader和css-loader来解析文件
},
{
test:/\.(png|jpg|gif)/,
// test:/\.(png|jpg|gif)/ 是匹配文件的后缀
use:[{
loader:'url-loader',
//指定loader的配置参数
options:{
limit:500,
outputPath:'images/'
}
}]
}
]
}
html中的图片打包
https://github.com/wzsxyz/html-withimg-loader
module:{
rules:[
{
test:/\.(htm|html)$/i
loader:'html-withimg-loader'
}
]
}