官网:https://webpack.docschina.org/
webpack的作用
如官网上的图片所示,就是通过webpack可以将左边的这些文件转换成浏览器识别的右边的这种类型的文件,文件的依赖关系可以保留。还可以将预编译的语言进行编译
入口(entry)
入口起点就是从那个文件开始,从这个文件可以逐渐找到其他文件的依赖关系,可以有多个不同的入口
输出
将输入的内容打包输出出来,上图中右边的文件就是输出的文件
loader
可以想象成是可以加载其他扩展语言的功能,比如说webpack本来只支持JavaScript和json的。通过loader就可以解析sass文件等
插件
插件就是具有某种特定功能的工具,比如说可以压缩文件
模式
就是打包的环境,比如开发环境,生产环境
安装webpack
首先我们创建一个目录,初始化 npm,然后 在本地安装 webpack,接着安装 webpack-cli(此工具用于在命令行中运行 webpack):
用下面这个进行全局安装
npm install webpack webpack-cli -g
然后创建一个项目的文件夹,使用下面第一条命令初始化,第二条命令进行webpack的本地安装
npm init -y
npm install webpack webpack-cli --save-dev
简单使用实例
创建一个demo文件夹,然后使用命令安装webpack
npm init -y
npm install webpack webpack-cli --save-dev
接着在这个项目文件夹中新建src文件夹,在里面创建两个文件,index.js和data.json,index.js就是webpack的默认入口文件,而data.json是index.js中用来举例引用的
data.json文件的内容如下
{
"username":"用户名"
}
然后输入下面命令进行打包
./src/index.js
就是指定入口文件
-o
是指定输出文件的放置位置
./dist/bundle.js
就是打包之后的文件
--mode
就是指定模式,development就是开发模式
webpack ./src/index.js -o ./dist/bundle.js --mode=development
下面这条就是生产环境打包(生产环境会进行压缩代码和代码混淆)
webpack ./src/index.js -o ./dist/bundle_production.js --mode=production
使用webpack配置文件进行打包
在原来demo项目的文件夹中创建一个名字叫webpack.config的js文件
然后就可以在webpack.config.js文件里面书写内容,配置打包的方式
首先要导入配置对象,对象里面书写配置内容,webpack.config.js如下
let path = require('path')
module.exports = {
// 入口文件
entry: "./src/index.js",
output:{
//输出的文件名称
filename:"bundle.js",
// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist')
},
// 开发模式
mode:'development'
}
执行打包命令
webpack
loader的使用
在原来的基础上创建一个css文件,然后在index.js中引入
因为webpack默认是不支持js中引入css的,所以要用到 loader
在webpack.config.js的配置文件中配置loader模块,内容如下
let path = require('path')
module.exports = {
// 入口文件
entry: "./src/index.js",
output:{
//输出的文件名称
filename:"bundle.js",
// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist')
},
// 开发模式
mode:'development',
// loader的配置
module:{
// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种,所以要放置在一个数组里面
rules:[
{
// 这里写的是正则表达式进行匹配文件
test: /\.css$/,
// use里面的内容是有顺序关系的,从下到上的解析顺序
use:[
// 将js的样式内容插入到style标签中
"style-loader",
// 将css文件转换为js
"css-loader"
]
}
]
}
}
接着要安装刚刚的两个Loader模块,使用下面命令进行安装
npm install style-loader css-loader --save-dev
然后执行下面命令打包
webpack
插件的使用
举例:index.html跟index.js自动整合到一起,使用插件html-webpack-plugin
将原来项目中的index.html移动到src里面,然后将index.html里面的引入bundle.js的代码去掉
接着修改原来的webpack.config.js文件,如下
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output:{
//输出的文件名称
filename:"bundle.js",
// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist')
},
// 开发模式
mode:'development',
// loader的配置
module:{
// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种,所以要放置在一个数组里面
rules:[
{
// 这里写的是正则表达式进行匹配文件
test: /\.css$/,
// use里面的内容是有顺序关系的,从下到上的解析顺序
use:[
// 将js的样式内容插入到style标签中
"style-loader",
// 将css文件转换为js
"css-loader"
]
}
]
},
// plugins插件配置
plugins:[
new HtmlWebpackPlugin({
// 告诉HtmlWebpackPlugin html文件的位置
template:'./src/index.html'
})
]
}
然后安装依赖,命令
npm install html-webpack-plugin --save-dev
打包图片资源文件
在项目原来的基础上,引入一张图片,然后在index.html中引入
修改webpack.config.js中的rules里面的配置,书写规则让webpack可以将图片打包进去
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output:{
//输出的文件名称
filename:"bundle.js",
// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist')
},
// 开发模式
mode:'development',
// loader的配置
module:{
// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种,所以要放置在一个数组里面
rules:[
{
// 这里写的是正则表达式进行匹配文件
test: /\.css$/,
// use里面的内容是有顺序关系的,从下到上的解析顺序
use:[
// 将js的样式内容插入到style标签中
"style-loader",
// 将css文件转换为js
"css-loader"
]
},{
test:/\.(jpg|png|gif)$/,
// 路径的解析
loader:'url-loader',
// 图片小于8kb,base64处理,优点是减少请求的数量,缺点就是使得体积更大
options:{
limit:8*1024,
// 关闭掉ES6的解析,因为url-loader是用es6的模块化解析,会跟html-loader产生问题,解析出来有可能是object-module,所以要关闭url-loader的es6的模块化解析
esModule:false,
// [hash:10]取图片hash的前10位;;[ext]是取图片的扩展名
name:'[hash:10].[ext]'
}
},{
// 处理html的loader
test:/\.html$/,
loader:'html-loader'
}
]
},
// plugins插件配置
plugins:[
new HtmlWebpackPlugin({
// 告诉HtmlWebpackPlugin html文件的位置
template:'./src/index.html'
})
]
}
安装依赖,因为图片是文件还要安装file-loader
npm install file-loader url-loader html-loader --save-dev
模块热加载
通过devServer进行热加载,修改webpack.config.js的内容如下
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件
entry: "./src/index.js",
output:{
//输出的文件名称
filename:"bundle.js",
// 输出的路径 绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist')
},
// 开发模式
mode:'development',
// loader的配置
module:{
// 对某个格式的文件进行转换处理的规则,文件类型可能会有多种,所以要放置在一个数组里面
rules:[
{
// 这里写的是正则表达式进行匹配文件
test: /\.css$/,
// use里面的内容是有顺序关系的,从下到上的解析顺序
use:[
// 将js的样式内容插入到style标签中
"style-loader",
// 将css文件转换为js
"css-loader"
]
},{
test:/\.(jpg|png|gif)$/,
// 路径的解析
loader:'url-loader',
// 图片小于8kb,base64处理,优点是减少请求的数量,缺点就是使得体积更大
options:{
limit:8*1024,
// 关闭掉ES6的解析,因为url-loader是用es6的模块化解析,会跟html-loader产生问题,解析出来有可能是object-module,所以要关闭url-loader的es6的模块化解析
esModule:false,
// [hash:10]取图片hash的前10位;;[ext]是取图片的扩展名
name:'[hash:10].[ext]'
}
},{
// 处理html的loader
test:/\.html$/,
loader:'html-loader'
}
]
},
// plugins插件配置
plugins:[
new HtmlWebpackPlugin({
// 告诉HtmlWebpackPlugin html文件的位置
template:'./src/index.html'
})
],
// 热重载
devServer:{
// 项目构建的路径
contentBase:path.resolve(__dirname,"dist"),
// 启动gzip压缩,使浏览器打开页面更快
compress:true,
//设置端口号
port:3000
//自动打开浏览器
open:true
}
}
安装依赖
npm install webpack-dev-server -g
启动项目
webpack-dev-server
如果报错很多依赖没有安装,使用下面命令安装一下
npm install
然后再使用启动项目命令启动