1、现在本地创建项目目录

image

2、然后在index.html中写入html的结构
3、想要先安装jquery，先npm init -y一下，npm install jquery -S【项目目录安装，必须是小写的jquery，否则会报错】，在index.html引入main.js
4、在main.js中写入内容如下：

    import $ from 'jquery';  //ES6新语法，浏览器不支持

    $('li:odd').css('backgroundColor','red');
    $('li:even').css('backgroundColor',{
        return '#' + 'D97634'
    })

使用webpack处理一下，转换成浏览器可以识别的文件：
a: 先全局安装一下webpack=>npm install webpack@3.5.5 -g
b: 在终端中执行：webpack ./src/main.js【要处理的文件的目录】 ./dist/bundle.js【要输出的文件的目录以及文件名】，会在dist中生成一个bundle.js文件，然后在index.html中引入的main.js文件改成 bundle.js
这样的话每次打包时候都需要执行 webpack ./src/main.js ./dist/bundle.js
c: 为了不手动指定入口和出口文件，在项目根目录中新建一个webpack.config.js（基于node的，所以** **node.js的命令都可以识别）

    const path = require('path');
    //通过node中的模块操作，向外暴露一个配置对象
    module.exports = {
        entry: path.join(__dirname,'./src/main.js'),  //入口文件，表示webpack要打包哪个文件
        output: { //输出文件相关的配置
            path: path.join(__dirname,'./dist'),  //指定打包好的文件，输出的哪个目录去
            filename: 'bundle.js'    //输出文件名
        }
    }

这样的话，就可以在终端中直接执行命令：webpack就可以直接打包了，但是还有个小问题。就是它不 会自动更新，需要手动刷新一下。下面我们就来解决这个问题。来配置webpack-dev-server

4、使用webpack-dev-server实现自动打包编译

image

直接安装webpack最高版本的时候，可能会遇到报错的情况，如果对于版本没有要求的话，可以降低版本：
npm install webpack@3.5.5 -D 如果还会有报错出现的话，可以试试使用cnpm安装

需要先在终端中安装webpack-dev-server：具体操作如下：
4.1 npm/cnpm install webpack-dev-server -D出现下面的提示：【其实此步骤容易出现报错，所以呢，把webpack-dev-server版本修改为@2.9.1=>webpack-dev-server@2.9.1时，就不会报错】

image

4.2 npm/cnpm install webpack -D【此步骤也是容易出错的，所以安装的时候要和上边的版本保持一致，webpack@3.5.5版本】
4.3 需要在package.json中配置dev

image

最后直接执行：npm run dev运行成功，但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件，而是一个与src dist node_module同级的看不见的文件，在index.html引入的路径也要修改以下=》<script src="/bunlde.js"></script>

此时，正常打包，但是不自动打开浏览器

发布出来，方便自己查看，有什么不对的地方，希望留言纠正修改。（程序员菜鸟一枚）