1、现在本地创建项目目录
目录结构如图所示，打码的不用创建
2、然后在index.html中写入html的结构
3、想要先安装jquery，先npm init -y一下，npm install jquery -S【项目目录安装，必须是小写的jquery，否则会报错】，在index.html引入main.js
3、在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实现自动打包编译
自动打包编译的解释
直接安装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时，就不会报错】
需要在本地再次安装webpack -D
4.2 ----- npm/cnpm install webpack -D【此步骤也是容易出错的，所以安装的时候要和上边的版本保持一致，webpack@3.5.5版本】
4.3 ----- 需要在package.json中配置dev
package.json中配置webpack-dev-server
最后直接执行：npm run dev运行成功，但是需要注意的是此时打包成的bundle.js文件不是磁盘中存在bundle.js文件，而是一个与src dist node_module同级的看不见的文件，在index.html引入的路径也要修改以下=》<script src="/bunlde.js"></script>
此时，正常打包，但是不自动打开浏览器
发布出来，方便自己查看，有什么不对的地方，希望留言纠正修改。（程序员菜鸟一枚）
网友评论