webpack基础配置和恼人的版本坑！

通过一个小小小的项目来走一遍webpack最最基础的流程吧！

项目目录

 root
	|__dist
	|     |__bundle.js
	|__src
	|     |__images
	|     |__css
	|     |__js
	|     |__main.js
	|     |__index.html
	|__webpack.config.js
	|__package.json

基本配置打包

• 在项目根文件夹下打开cmd终端
  打开方式：如何使用vscode的终端（保姆级）
  

• npm init -y 根目录下执行，初始化项目，生成 package.json文件

• 根据项目目录创建文件夹： src 用来存放源码；dist 用来存放要发布的文件（空）
  
  index.html结构

   <ul>
       <li>这是第1个li</li>
       <li>这是第2个li</li>
       <li>这是第3个li</li>
       <li>这是第4个li</li>
       <li>这是第5个li</li>
   </ul>
  

  main.js

  import $ from 'jquery'
  $(function() {
      $('li:even').css('backgroundColor', 'burlywood')
      $('li:odd').css('backgroundColor', 'cornflowerblue')
  })
  

• npm install jquery 先把js里要用到的模块下载好

• npm install webpack webpack-cli -g 全局安装为开发依赖 webpack，webpack4.0以上要手动安装 webpack-cli

• 根目录下需要新建 webpack.config.js 文件 ，如下配置 入口 和 出口

  const path = require("path")
  // 使用node'语法向外暴露对象，因为webpack底层就是用nodejs开发的
  module.exports = {
      // 入口文件：指定要处理的JS文件
      entry: path.join(__dirname, './src/main.js'),
      // 指定输出选项
      output: {
          path: path.join(__dirname, './dist'),
          filename: 'bundle.js'
      }
  }
  

• webpack --mode development 打包。发布成功
  

• index.html中引入编译后的 bundle.js文件，就可以在浏览器端打开啦。但是每次修改都需要打包发布流程，不如来热更新。

  <script src="/bundle.js"></script>
  

热更新

• 类似于nodemon功能，实时监听项目改变，自动编译
• npm install webpack-dev-server -D 把webpack-dev-server安装为项目依赖
• 在package.json的 scripts字段中增加

  // scripts字段里的都是脚本，添加了之后可以通过 'npm run 脚本名称' 来运行
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
    },
  // 其中 --open 表示打开默认浏览器，
  // --port 表示端口号， 
  // --contenBase 表示进入哪个目录， 
  // --hot 表示热更新，这是热更新的第一步
  

• npm install html-webpack-plugin -D 安装 html-webpack-plugin
• 在webpack.config.js中写入

  // 导入在内存中生成HTML页面的插件
  // 只要是插件 都一定要放到plugin节点中去
  /* 这个插件的两个作用：
      1. 自动在内存中根据指定页面生成一个内存的页面
      2. 自动把打包好的 bundle.js 追加到页面中去 */
  const htmlWebpackPlugin = require("html-webpack-plugin")
  
  // 在 module.exports 中增加
  plugins: [
      new htmlWebpackPlugin({
          // 创建一个在内存中生成HTML页面的插件
          // 这里指定模板页面，将来会根据指定的页面路径去生成内存中的页面
          template: path.join(__dirname, "./src/index.html"),
          filename: "index.html"
      })
  ]
  

• npm run dev 发现报错，好吧webpack-dev-server需要webpack的本地依赖
  [Error: Cannot find module ‘webpack’]
• npm install webpack webpack-cli -D把这两个工具安装为开发依赖，安装完后package.json文件显示依赖如下
  
  （这里有个坑，webpack-cli的默认新版本对webpack-dev-server版本的不兼容。这步可以直接看后面的报错内容）

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

• 重新安装webpack和webpack-cli为项目依赖之后，执行npm run dev报了这个错。按理这里应该出现我打包完成并且启动服务的。找了半天原因！其实是版本不兼容！恼人！
  
  webpack-cli的新版本对webpack-dev-server版本的不兼容，上上图的"devDependencies"可以看到，默认安装的版本是 “^4.7.0”。手动降低webpack-cli的版本为 “^3.3.12”

• npm uninstall webpack-cli先卸载当前的webpack-cli

• npm i webpack-cli@3.3.12 -D 就ok了
  

• 放心大胆地 npm run dev吧！