创建基本的webpack项目

创建一个webpack项目步骤如下：

1. 创建一个文件夹，给文件夹取一个名称，在这里文件夹的名称为webpack

2. 进入该文件夹打开cmd，输入npm init -y，初始化项目

3. 在项目根目录创建src源代码目录(文件夹）和dist产品目录(文件夹），选择一款合适的IDE打开项目

4. 在src目录下创建index.html

5. 安装需要的包：webpack,webpack-cli，

   1. 安装命令为nmp i webpack webpack-cli -D，这条命令为局部安装，也就是说安装路径在项目的文件夹里。

   2. 打包项目的方法为在IDE的终端中输入webpack，但是如果只局部安装webpack，会报错

       'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。
      

      有两种解决方法

      1. 运行nmp i webpack webpack-cli -g，全局安装
      2. 配置webpack路径

   3. 解决npm下载慢的问题：使用国内镜像，安装cnpm（npm i cnpm -g)，使用cnpm代替npm

6. 解决每次修改需要重新打包的问题：使用webpack-dev-server包
   1. 安装方法：运行npm i webpack-dev-server -D
   2. 需要注意的问题：webpack-dev-server和webpack、webpack-cli存在版本不兼容的问题，会报一个错

   - npm run server后会报错：Cannot find module 'webpack-cli/bin/config-yargs'
   

   这就是版本不兼容问题造成的，我使用的版本为
   

   3. 配置webpack-dev-server：在package.json中的scripts中配置，

   

   4. 配置好后在终端运行npm run dev即可，这样就可以每次修改之后自动打包

注意点：

1. webpack的约定的入口文件是index.js，不是main.js。在webpack4.x中，有一个很大的特性，就是约定大于配置，约定默认的打包入口文件的路径是 src->index.js，输出文件为dist->main.js
2. webpack-dev-server自动打包的时候把生成的main.js托管到了内存中，这样访问比较快，但是index.html没有托管，所以可以利用一个插件HtmlWebPackPlugin将首页托管到内存中
3. 在打包之前，新建一个webpack.config.js指定mode,mode有两种取值，
   development
   production ：比较小