Webpack入门
2018年03月07日 17:04:36
阅读数:73
本质上,
webpack
是一个现代JavaScript
应用程序的静态模块打包器(module bundler
)。当webpack
处理应用程序时,它会递归地构建一个依赖关系图(dependency graph
),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle
。
全局安装
tnpm install -g webpack
Windows
环境下会安装到此目录C:\Users\{UserName}\AppData\Roaming\npm
中
不推荐全局安装
webpack
。这会将你项目中的webpack
锁定到指定版本,并且在使用不同的webpack
版本的项目中,可能会导致构建失败。
本地安装
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目,我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时,更容易分别升级项目。
当你在本地安装 webpack 后,你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
查看webpack当前版本时,可能出现如下错误【Webpack4.0新特性】
意思是说webpack4.0
之后版本中,命令行界面(CLI
)在单独的包中,需要安装webpack-cli
来使用CLI
功能。执行如下其中一个命令即可。
npm install webpack-cli -D
yarn add webpack-cli -D
2018.6.4 update
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use “npm” to install the CLI via “npm install -D”.
Which one do you like to install (webpack-cli/webpack-command):
创建项目
创建WebpackDemo
文件夹,进入命令行,在当前目录下执行
npm init
生成package.json
文件(采用默认设置)
在app
目录下增加main.js
文件
document.write("It works.");
在public
目录下增加index.html
文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
命令行使用webpack
webpack app/main.js public/bundle.js
出现如下错误【Webpack4.0新特性】
需要指定开发模式mode
,指定入口文件app/main.js
webpack --mode development app/main.js
无需指定目标文件,默认输出文件是./dist/main.js
然后修改文件index.html
的src="../dist/main.js"
,本地运行即可。
配置文件使用webpack
根目录下创建webpack.config.js
文件,指定入口文件和输出文件
module.exports = {
entry: './app/main.js',
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
}
有了这个配置文件,执行如下命令即可打包,输出文件目录./public/bundle.js
webpack --mode development
注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
快捷的执行打包任务
npm
可以引导任务执行,对npm
进行配置后可以在命令行中使用简单的npm start
命令来替代上面略微繁琐的命令。
在package.json中对scripts进行设置:
"scripts": {
"dev": "webpack --mode development",
"publish": "webpack --mode production"
}
执行npm run dev
或者npm run publish
.
我们可以发现生产环境下打包的文件比之前明显体积变小了。
配置文件提供一个入口和一个出口,
webpack
根据这个来进行js
的打包和编译工作。虽然webpack
提供了webpack --watch
的命令来动态监听文件的改变并实时打包,输出新bundle.js
文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到hot replace
,即每次webpack
编译之后,你还需要手动刷新浏览器。
webpack-dev-server
其中部分功能就能克服上面的2个问题。webpack-dev-server
主要是启动了一个使用express
的Http
服务器。它的作用主要是用来伺服资源文件。此外这个Http
服务器和client
使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server
会实时的编译,但是最后的编译的文件并没有输出到目标文件夹,便以文件仅保存在内存中。
使用webpack构建本地服务器
全局安装webpack-dev-server
tnpm install -g webpack-dev-server
通过“命令行”启动本地服务
webpack-dev-server --content-base ./public
webpack-dev-server 能够用于快速开发应用程序,后面可以指定不同的指令参数。
–conntent-base 指定本地服务器所加载的页面所在的目录。
–open 启动默认浏览器,或者指定浏览器名
webpack-dev-server --open 'Google Chrome'
访问localhost:8081,不指定--content-base
,则显示工程目录结构
注意:你启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
配置文件
module.exports = {
entry: './app/main.js',
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
}
}
当然还有许多配置项