一、webpack简介
At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
二、webpack安装
安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm
1)查看node版本
2)全局安装webpack
先指定版本号3.6.0,因为vue cli2依赖该版本
3)局部安装
--save-dev是开发时依赖,项目打包后不需要继续使用的
4)为什么全局安装后,还需要局部安装呢?在终端直接执行webpack命令,使用的全局安装的webpack
当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack
5)查看webpack版本
三、webpack起步
1)创建相关文件及文件夹
2)使用webpack工具,对多个js文件进行打包
3)index.html中引入
bundle.js文件,是webpack处理了项目直接文件依赖后生成的一个js文件,我们只需要将这个js文件在index.html中引入即可
四、webpack配置
4.1、入口与出口
如果每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦,有没有一种方法可以将这两个参数写到配置中,在运行时,直接读取呢?当然可以,就是创建一个webpack.config.js文件
const path = require('path')
module.exports = {
//入口: 可以是字符串/数组/对象
entry: './src/main.js',
output: {
//出口:通常是一个对象
path: path.resolve(__dirname, 'dist'), //绝对路径
filename: 'bundle.js'
},
}
4.2、局部安装webpack