154Vue工程化-webpack概念模块化支持，代码压缩混淆+基本使用+安装+打包入口出口+自动打包

webpack不要再html首页引入js打包后会自己引入、webpack-dev-server打包前要在html引入/绝对路径的js文件，文件命名是output的filename

6.webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

7.webpack的基本使用

A.创建项目目录并初始化

创建项目，并打开项目所在目录的终端，输入命令：
    npm init -y

B.创建首页及js文件

在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li
在项目目录中创建js文件夹，并在文件夹中创建index.js文件

C.安装jQuery

打开项目目录终端，输入命令:
npm install jQuery -S

D.导入jQuery

打开index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

注意：此时项目运行会有错误，因为import $ from “jquery”;这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlguin = new HtmlWebpackPlugin({
   
  template: './src/index.html',
  filename: 'index.html'
})
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
   
  // 编译模式
  mode: 'development', // development  production
  entry: path.join(__dirname, './src/index.js'),
  output: {
   
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundl