webpack 打包 环境配置

什么是webpack？

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具，借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

安装

方式1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
方式2. 在项目根目录中运行npm i webpack -d安装到项目依赖

步骤

1.首先建一个自己的项目，例如：webpack
在根目录(webpack)下建立两个文件夹 dist 和 src；
src下创建文件夹如下：

2. 在根目录下输入npm init -y 初始化项目，点击回车，这时项目中会生成一个 package.json 文件。如图：

3.以我做的项目为例，实现奇偶行变色，需要用到jQuery，所以接下来下载jQuery包。npm install jquery -S 如图：

这时根目录中，会出现一个 node_modules 文件夹。注：这个文件夹里放入的都是你项目的依赖项。
4. 在 main.js 中引入 jQuery。***注：main.js文件是项目 js 入口文件。***如图：

5. 导入文件，用的是ES6导入模块方式，ES6 的代码，浏览器解析不了，所以要把他编译成，浏览器可以解析的格式。 在命令行输入webpack .\src\main.js .\dist\bundle.js ，注：后边这两个路径分别是：要打包的文件的路径 ，打包好的输出文件的路径
这时候点回车，有可能报错，报错的原因，是当前 webpack 版本的问题。
解决方法：全局下载4以下的版本，例如: npm i webpack@3.6.0 -g , 安装好后，再次输入webpack .\src\main.js .\dist\bundle.js 即可。

6.如果修改页面，每次都要重新生成且编译 main.js 文件，非常麻烦。
解决方案：在项目根目录下创建 webpack.config.js 文件。(必须这样命名) ，在里面声明入口和出口，如：

const path = require('path')
module.exports = {
  //在配置文件中我们需要手动指定入口和出口
  
  //入口 表示要使用webpack打包哪个文件
  entry:path.join(__dirname,'./src/main.js'),
  //出口 输出文件的相关配置
  output:{
    path:path.join(__dirname,'./dist'),//指定打包好的文件输入到那个目录中去
    filename:'bundle.js' //指定输出文件的名称
  }
}

此时在，根目录下输入命令webpack 回车：

注：这样只是比刚才生成输入命令简单，但是每次修改页面，他还是不能自己编译生成，还需要手动生成！

7.为了解决这个问题，所以我们需要安装 webpack-dev-server，在项目根目录下输入cnpm install webpack-dev-server -D,安装本地目录，回车

这是控制台已经显示安装成功，但是两行红色报错，说的是，webpack-dev-server 需要 webpack 依赖，但是还有没下载，所以在当前目录下下载 webpack
cnpm install webpack -s

8. 在项目根目录下输入webpack-dev-server 命令，回车：

报错了不要害怕，接下来打开 package.json 文件，添加以下指令：

注：dev 是自己起的名字！

9.配置完成以后 ，输入命令npm run dev
这个时候可能会报错。
解决方案：
删除 node_modules 文件
然后 输入npm i 命令重新生成，点击回车：

注：这时也有报错，大致意思就是说没有安装依赖项 webpack
10. 输入命令 cnpm install webpack -D

11. 输入命令 npm run dev

注：这里有一个 Error ，说的是没有 webpack-cli ，我们只需安装一下就OK啦！！！！
输入命令 cnpm install webpack-cli -D

12. 输入命令 npm run dev

到这里大功告成，我们只需把地址复制到浏览器中，即可渲染自己的项目页面！！！！