手把手教你webpack项目搭建

一、 webpack项目的创建

1、准备阶段

首先我们要了解webpack是干什么的，他就是一个整合模块的工具，其实就是整合javascript代码，就是把分开的代码整理在一起

webpack 官网 https://webpack.js.org/

国外的网站都是英文的相比你一定头大。

webpack 中文文档 https://www.webpackjs.com/

环境准备

1. node 这个必须安装 链接 https://nodejs.org/zh-cn/
   使用 node -v 是否安装完成
   因为node是自带npm的但是npm不是最新（更新使用命令就好，但记得切换镜像源）

2、项目搭建

先安装webpack

npm install webpack -g \\全局安装webpack

npm install webpack-cli -g \\安装脚手架

1. 准备一个空文件夹 名字随意

在目录中打开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了