一、什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
点这里解更多关于
JavaScript
模块和webpack
模块的信息
二、安装webpack
1. 安装webpack前的准备工作
1.1 安装node 和 npm
// node官网:https://nodejs.org/en/
// node中文网 http://nodejs.cn/download/
我的电脑安装环境:Windows7 x64
1.下载安装包“node-v0.12.0-x64.msi”后双击,然后一路next点击
2.Node.js默认安装路径为“C:\Program Files\nodejs\”,建议不要修改
3. 最后点击 Install 安装完成
打开cmd输入node -v
检查是否安装成功
npm不需要单独安装,node安装完成npm也安装好了,输入 npm -v
检查npm是否安装成功
npm install xxx -g 全局安装时的安装包都在哪里呢? 输入
npm config ls
查看配置,找到对应目录打开就发现全局安装的文件位置了哦,如下图
一切就绪就可以开干了~
1.2 创建一个文件目录,放置你的项目
$ mkdir webpack-start
$ cd webpack-start
在该目录下执行npm init
,生成package.json
$ npm init
1.3 安装webpack
$ npm install webpack webpack-cli -D
npm i -D 是 npm install --save-dev 的简写,是指安装模块并保存到 package.json 的 devDependencies中,主要在开发环境中的依赖包
2.配置webpack
2.1 感受 webpack4 的 0 配置
webpack
打包会找到src
下的index.js
进行默认打包,所以先新建src
目录,并创建index.js
文件,如下图:
// src/index.js 中写了一句hello world
document.write("hello world");
此时就可以执行一下webpack
打包命令了。
在此之前先插播一个小知识点:
- npm 5.2.0 版本中内置了伴生命令:npx,类似于 npm 简化了项目开发中的依赖安装与管理,该工具致力于提升开发者使用包提供的命令行的体验。
- npx 会自动查找当前依赖包中的可执行文件,如果找不到,就会去 PATH 里找。如果依然找不到,就会帮你安装!
笔者本人本地npm已经升级到5.6.0了,查看npx的版本是9.7.1的,如下图:
那么此时我们就可以直接使用npx来执行webpack打包的操作喽~
// 执行命令
$ npx webpack
此时执行完会发现报一个警告,因为没有设置
mode
,如果不设置mode
的情况下,打包出来的文件是自动压缩
打包完成后发现生成了一个dist
目录和main.js
文件(默认文件名)。
如果不想压缩的话可以执行
$ npx webpack --mode development
打包后的main.js
内容就不会压缩了
此时直接打包后的main
就可以再浏览器中运行了,为了看效果,在dist
目录下新建一个index.html
,并引入main.js
,然后用浏览器打开
上面发现默认一些配置其实还是不能满足日常开发需要,所以我们还是对webpack进行一些配置,下面介绍webpack配置的问题。
2.2 快速配置webpack
在项目目录下新建webpack.config.js
文件
/*创建并配置文件webpack.config.js
entry:配置入口文件的地址
output:配置出口文件的地址
module:配置模块,主要用来配置不同文件的加载器
plugins:配置插件
devServer:配置开发服务器
*/
module.exports = {
entry: '', // 入口文件
output: {}, // 出口文件(比如dist)
module: {}, // 对模块的处理 loader加载器
plugins: [], // webpack对应的插件
devServer: {}, // 开发服务器配置
mode: 'development' // 模式配置
}
2.2.1 基于上面,我们先开始最简单的配置
配置entry和output,将src下的index.js 打包到dist目录生成 bundle.js
// webpack.config.js
let path = require('path');
module.exports = {
entry: './src/index.js', // 设置入口文件
output: {
filename:'bundle.js', // 打包后的文件名称
path: path.join(__dirname,'dist') // 设置打包到哪个目录下,且是绝对路径
}
}
执行npx webpack
后dist下生成bundle.js
2.2.2 配置执行文件
在package.json中配置scripts之后就可以通过npm run xxx
来执行命令。
"build": "webpack"
,可以通过执行 npm run build
来打包,效果和上面打包一样。
2.3 多入口
有时候我们的页面可以不止一个HTML页面,会有多个页面,所以就需要多入口。
2.3.1. 没有关系的但是要打包到一起去的,可以写一个数组,实现多个文件打包成一个文件
// src/index.js
document.write("hello world");
新建test.js
:
// src/test.js
console.log('ok');
// webpack.config.js
// 1.写成数组的方式就可以打出多入口文件,不过这里打包后的文件都合成了一个
let path = require('path');
module.exports = {
entry: ['./src/index.js', './src/test.js'],
output: {
filename: 'bundle.js',
path: path.join(__dirname,'dist')
}
}
打包后dist下生成bundle.js:
在index.html中引用,效果如下:2.3.2. 每个文件都单独打包成一个文件的
// webpack.config.js
// 2.entry需要写成对象的方式,output中filename的name要根据entry中key进行匹配
let path = require('path');
module.exports = {
entry: {
index: './src/index.js',
test: './src/test.js'
},
output: {
// 2. [name]就可以将出口文件名和入口文件名一一对应
filename: '[name].js', // 打包后会生成index.js和test.js文件
path: path.join(__dirname,'dist')
}
}
打包后dist目录下分别生成了index.js和test.js
未完待续...
参考: