webpack基本配置

准备好环境：
node环境安装
首先，从Node.js官网下载对应平台的安装程序，网速慢的童鞋请移步国内镜像。
在Windows上安装时务必选择全部组件，包括勾选Add to Path。
安装完成后，在Windows环境下，请打开命令提示符，然后输入node -v，如果安装正常，你应该看到v12.14.1这样的输出，这是mac下输出：

promote:~ lhy$ node -v
v12.14.1

然后在查看npm版本 ：npm -v

promote:~ lhy$ npm -v
6.13.4

node安装后npm也就安装好了
第二：新建工作目录，进入目录后执行命令

npm init -y
就会生成一个 package.json文件
然后安装jquery 这里用到了jquery如果不用就不需要安装
命令：
npm install jquery -s
安装好之后，工作空间会多出一些文件夹或文件 如node_modules 等里面包含jquery等
新建src文件夹，在文件夹创建index.js 和index.html文件

index.html文件：

    
    
    
    
    



    
        
这是第1个li
        
这是第2个li
        
这是第3个li
        
这是第4个li
        
这是第5个li
        
这是第6个li
        
这是第7个li
        
这是第8个li
    
    

index.js文件：实现各行变色

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

如果这样直接运行不会出现各行变色的效果，因为它有兼容性问题，需要webpack转换：

所以我们在当前目录下安装：
npm i webpack webpack-cli -D
在根目录下新建一个webpack.config.js文件,配置如下内容，测试环境用development，打包后的文件不会压缩混淆，生产用production将会压缩混淆：

module.exports = {
    //编译模式  development  production
    mode:'development'
}

然后在package.json文件中scripts标签下增加"dev":“webpack”：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  }

然后运行
npm run dev

这样就会打包出一个dist文件：

最后将打包好的dist文件引入到index.html，替换原来的./index.js：

运行index.html 查看结果：

这样就实现了变色，就不会有兼容问题了，这就是webpack基本配置。