大家好,又见面了,我是全栈君。
“模块化”可以说是现在前端最流行的三个字,而webpack就是一款非常非常流行的模块打包工具,它可以分析模块之间的依赖关系,并将这些模块根据指定规则打包成浏览器能识别的静态资源。
作为一个前端,学习并使用webpack已经是刻不容缓的事情,现在,就让我们开始webpack之旅吧。
首先新建一个空的文件夹,使用npm init命令初始化。
初始化的目的是为了生成package.json文件,这是一个npm说明文件,里面包含了当前项目的依赖模块,自定义的脚本任务等信息。
//新建webpack-demo的文件夹
mkdir webpack-demo
//进入该文件夹
cd webpack-demo
// 初始化
npm init
复制代码
输入npm init命令后,终端会要求你填写一些信息,如果你不准备在npm中发布你的模块,直接一路回车完成初始化就行。
初始化完成后,你可以看到已经生成了一个package.json文件,你也可以在这个文件里手动修改初始化的时候终端让你输入的信息。
接下来就要安装webpack,你可以全局安装webpack,也可以在项目目录下安装webpack,官方不支持全局安装,因为那样会使不同webpack版本的项目搭建失败。
// 全局安装
npm install -g webpack
// 安装到指定项目目录
npm install --save-dev webpack
复制代码
安装完成后我们发现项目目录中多了一个node_modules文件夹,我们可以查看下webpack的版本。
// 查看全局安装的webpack版本
webpack -v
// 查看非全局安装的webpack版本
cd node_modules/.bin
webpack -v
复制代码
接下来我们开始用webpack来打包第一个文件。
用编辑器打开项目,新建一个hello.js文件。
使用webpack打包hello.js文件,同样,不是全局安装webpack的小伙伴们这时得注意路径问题了。
// 全局安装webpack的情况
webpack hello.js bundle.js
// 非全局安装webpack的情况
cd node_modules/.bin
webpack [完整路径]/hello.js [完整路径]/bundle.js
复制代码
如图所示,打包完成后,webpack会告诉我们一些信息,比如打包时间、打包后文件的大小等。
这时我们发现,如果不是全局安装webpack,执行webpack打包命令将变得非常麻烦,其实我们可以配合npm的脚本来更快捷的执行打包任务。
修改package.json文件,在scripts属性中新增执行webpack打包的脚本,比如build,执行npm run build hello.js bundle.js,发现打包成功。
打包好之后我们可以通过live-server启动一个本地服务。
// 全局安装live-server
$ npm install -g live-server
复制代码
安装好之后执行live-server,会发现它已经帮我们打开了一个浏览器页面,并且当你修改本地任何文件时,浏览器都会自动更新。
现在我们已经成功打包了一个js文件,接下来让我们试着打包一个css文件。
新建一个index.html文件和style.css文件,在样式文件中添加一些样式,并在hello.js文件里用require的方式将其引入(require是CommonJS的语法,webpack支持CommonJS/AMD/CMD)。
这时如果我们直接打包会发现报错了,错误提示我们需要一个合适的loader来处理这种css文件类型。因此我们要先安装两个loader,css-loader和style-loader,前者是使webpack支持css文件,后者则会将样式通过style标签插入到html中。
npm install css-loader style-loader --save-dev
复制代码
安装完成后,我们还需要在文件引用的地方指定相应的loader。
require('style-loader!css-loader!./style.css')
复制代码
再次执行打包命令发现打包成功,在index.html里引入打包好的bundle.js,打开index.html页面发现样式已经成功显示。
// 文件更新的时候自动打包
webpack {entry file} {bundled file} --watch
// 显示文件打包的过程
webpack {entry file} {bundled file} --progress
// 显示所有模块
webpack {entry file} {bundled file} --display-modules
// 显示打包模块的原因
webpack {entry file} {bundled file} --display-reasons
复制代码
webpack有非常多的功能,因此我们需要有一份好的配置文件来放置所有的打包配置信息。
如图所示,构建一份新的目录,src文件夹用来放打包前的资源,dist文件夹用来放打包后的资源,webpack.config.js用来配置打包信息,如果配置文件不叫webpack.config.js,则打包的时候需要用–config来重新指定,比如
webpack --config webpack.config.a.js
复制代码
入口(Entry)和出口(Output)
入口(enrty),简单来说,就是告诉webpack从哪里开始。我们可以通过在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点)。webpack会根据这个入口,来获取模块之间的依赖关系并根据依赖关系来知道需要绑定些什么。
出口(output),用来告诉webpack打包后文件做何处理及存放的位置。如上图所示,output.filename 指定了打包后的文件的名字,output.path则指定了文件存放的位置。
关于path获取到的绝对路径,我们可以新建一个js文件输入该路径,并用node运行这个js文件。
入口(Entry)
entry属性的单个入口语法,是下面这种的简写方式:
出口(Output)
如果在打包生成的文件名后面加上不确定的chunkhash,这时候我们需要借助webpack的插件html-webpack-plugin来自动生成项目中的html页面。
// 通过npm安装
$ npm install html-webpack-plugin --save-dev
复制代码
Loader
loader用于对模块的源代码进行转换。它可以将不同语言的文件转换为JavaScript,或将图片转换为dataURL等。
安装babel:
$ npm install --save-dev babel-loader babel-core babel-preset-latest
复制代码
指示webpack对每个.js结尾的文件使用babel-loader进行转换:
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
}
]
}
复制代码
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['latest']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=10000&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
}
]
复制代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107658.html原文链接:https://javaforall.cn