一、 webpack项目的创建
1、准备阶段
首先我们要了解webpack是干什么的,他就是一个整合模块的工具,其实就是整合javascript代码,就是把分开的代码整理在一起
webpack 官网 https://webpack.js.org/
国外的网站都是英文的相比你一定头大。
webpack 中文文档 https://www.webpackjs.com/
环境准备
- node 这个必须安装 链接 https://nodejs.org/zh-cn/
使用node -v
是否安装完成
因为node是自带npm的但是npm不是最新(更新使用命令就好,但记得切换镜像源)
2、项目搭建
先安装webpack
npm install webpack -g
\\全局安装webpack
npm install webpack-cli -g
\\安装脚手架
- 准备一个空文件夹 名字随意
在目录中打开cmd
就是一个空目录什么都没有,需要我们手动生成包的配置文件
然后它会提示一些信息,反正就是信息唯一一点 包名不要和文件夹同名不然会报错
什么都不用管一路回车就够了
解释如下
版本信息
描述信息
输入文件,就是整合的文件
测试命令
git 仓库
关键字
作者
生成的json 结构
生成的文件
我们还需要他的依赖文件所以还需要安装到当前目录
npm install --save-dev webpack
如果前面生成的package.json 中的包名与目录名相同就会报错
当前目录结构
基本完成了,但是因为他的生成是按照配置文件来的,如果没有配置文件就按照默认的来
默认输出在整合文件在 dist 目录下 整合在 src 目录下 所以我们需要创建这两个目录
新增目录结构
-
src
-
index.js 创建并写入代码
document.write('sadasdasd');
dist
- index.html
去看看你html文件中有没有一个mian.js
这个就是整合的js文件
这就是默认输出的文件,如果你要自定义输出看下面
3、自定义输出
我们需要在目录向创建一个 名为 webpack.config.js
的文件
在其中写入配置
这就是基本的配置文件
module.exports={
//入口文件
entry:'./src/index.js',
//输出文件
output:{
//输出路径
path:`${__dirname}/dist`,
//输出文件名 其实也可以只写文件名 例如 filename:'dist/main.js'
filename:'main.js',
}
}
npm run dev
或者 webpack --mode development
再次运行就ok了
文件生成就ok了