webpack的配置文件webpack.config.js
在项目根目录下创建webpack.config.js
文件
代码及注释如下:
const path = require('path');
//这个配置文件,其实就是一个 JS 文件,通过 Node 中的模块操作,向外暴露一个 配置对象
module.exports = {
// 在配置文件中,需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'), //入口,表示 要使用 webpack 打包哪个文件
output: { //输出文件相关的配置
path: path.join(__dirname, './dist'), //指定 打包好的文件,输出到哪个目录中去
filename: 'bundle.js' //这是指定 输出的文件的名称
}
}
// 当我们在控制台,直接输入 webpack 命令执行的时候,webpack 做了以下几步:
// 1.首先,webpack 发现,我们并没有通过命令的形式,给他指定入口和出口
// 2.webpack 就会去 项目的根目录中,查找一个叫做 'webpack.config.js' 的配置文件
// 3.当找到配置文件后,webpack 会解析执行这个 配置文件,当解析执行完配置文件后,就得到了 配置文件
// 中,导出的配置对象
// 4.当 webpack 拿到 配置对象后,就拿到了 配置对象中,指定的 入口 和 出口,然后进行打包构建
上边的代码是一个最最基本的webpack配置文件,entry
:是指定要打包的入口文件,output
:指定打包好之后文件的路径和文件名。
(src
是我们放我们的源代码的文件夹,dist
是我们放我们编译后文件的文件夹),
有了基本的webpack.config.js
,我们用webpack来打包就简单了。可以直接执行下边命令:
webpack
webpack默认就会去寻找根目录下的webpack.config.js 文件。
打包成功,dist
文件下就会生成一个 bundle.js
。
续:
- 在
webpack.config.js
中配置webpack-deev-server
参数 - 在
webpack.config.js
中配置插件的节点
// 导入处理路径模块
const path = require('path');
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件,都一定要放到 plugins 节点中去
// 这个插件的两个作用:
// 1. 自动在内存中根据指定页面生成一个内存的页面( 物理内存中的index.html,中的 script 的src 属性的引用可以注释掉)
// 2. 自动,把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
//这个配置文件,其实就是一个 JS 文件,通过 Node 中的模块操作,向外暴露一个 配置对象
module.exports = {
// 在配置文件中,需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'), //入口,表示 要使用 webpack 打包哪个文件
output: { //输出文件相关的配置
path: path.join(__dirname, './dist'), //指定 打包好的文件,输出到哪个目录中去
filename: 'bundle.js' //这是指定 输出的文件的名称
},
devServer: { //这是配置 dev-server 命令参数的第二种形式,相对在package.json中配置来说,这种麻烦
// --open --port 3000 --contentBase src --hot"
open: true, //自动打开浏览器
port: 3000, //设置我们启动时候的运行端口
contentBase: 'src', //指定托管的根目录
hot: true, //启动热更新 的第1步
},
plugins: [ //配置插件的节点
new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象,这是启用热更新的第3步
new htmlWebpackPlugin({ //创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), //指定 模板页面 。将来会根据 指定 的页面路径,去生成内存中的 页面
filename: 'index.html' //指定生成的页面的名称
})
]
}
// 当我们在控制台,直接输入 webpack 命令执行的时候,webpack 做了以下几步:
// 1.首先,webpack 发现,我们并没有通过命令的形式,给他指定入口和出口
// 2.webpack 就会去 项目的根目录中,查找一个叫做 'webpack.config.js' 的配置文件
// 3.当找到配置文件后,webpack 会解析执行这个 配置文件,当解析执行完配置文件后,就得到了 配置文件
// 中,导出的配置对象
// 4.当 webpack 拿到 配置对象后,就拿到了 配置对象中,指定的 入口 和 出口,然后进行打包构建