webpack 是一个现代 JavaScript 应用程序的静态模块打包器
一般vue的项目都是需要构建,而现在主流的构建工具webpack今天简单的使用一下,这里使用的是4.0版本后的,和之间的多少有点不同。
一,创建
创建一个文件夹(自己随意)
进入到文件夹中,打开终端或(cmd)命令窗口
npm init -y
初始化一下node,生产一个配置文件package.json,生产好这个文件后,我们安装webpack
npm isntall webpack webpack-cli --save-dev
我们会得到这些文件,(src)是本人模拟vue自己创建的
打开package.json我们更改一下运行配置
src文件中写创建一个js文件,写上一些逻辑热后
npm run build
会自动生成一个dist目录,并生成一个main.js文件这个文件里就我们build 后生成的构建后的代码
可以看出webpack4.0版本后默认src为入口,dist为出口
当然我们也可以手动配置,文件的入口和出口
二,配置webpack
配置webpack,我们需要创建一个它特有的配置文件webpack.config.js
在webpack中做一些配置,就可实现
//webpack.config.js文件
const path=require('path');
const config={
// 指定模式
mode:"development"
// 配置项目入口
entry:"./src/main.js",
//配置项目出口
output:{
//利用node 的path模块动态获取根目录下的dist目录
path:path.resolve(__dirname,"dist"),
// 转换输出文件名
filename:"bundle.js"
}
}
module.exports=config