VSCode构建WebPack项目

什么是LayUI

其采用自身模块规范编写的UI框架，遵循原生HTML/CSS/JS书写格式，无需涉及各种前端工具的复杂配置，只需要面向浏览器本身

什么是VSCode

是一个代码编辑器，适用于前端项目编写
具有轻量化，插件化等优点

什么是WebPack

webpack是一个 前端项目构建工具，基于node.js开发的前端工具
是一个前端构建工具，解决了两个问题：
|——1. 处理js互相依赖关系
|——2. 处理js兼容问题(高级语法识别)

Gulp和webpack区别

Gulp：基于任务进行构建，若项目很大，则需要构建很多任务。优点：小巧灵活
webpack：基于项目进行构建的，可以玩美实现资源合并，打包，压缩，混淆等诸多功能

VSCode构建普通项目步骤–待测试

新建空文件夹——>VSCode打开此文件夹——>Ctrl+shift+p输入task

VSCode构建WebPack项目步骤

1. 新建空文件夹

2. VSCode打开相应文件夹

3. webpack初始化

npm -i webpack -g  全局安装
npm init -y    
npm i jquery -S

4. 配置出入口文件，并自动打包

4.1安装webpack-dev-server实现自动打包编译

## 1. npm install webpack-dev-server -D
## 2. package.json配置dev属性
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

4.2创建main.js入口文件(webpack只认js文件)

## 1. src目录创建main.js入口文件
import $ from 'jquery'
$(function(){
    $('li:odd').css('backgroundColor','red')
})
## 2. 根目录创建webpack.config.js进行相应配置
const path = require('path')
const webpack = require('webpack')
module.exports={  //此配置文件，通过node的模块操作，向外暴露一个配置对象
    entry:path.join(__dirname,'./src/main.js'), //webpack需要打包的文件
    output:{
        path:path.join(__dirname,'./dist'), //指定输出目录
        filename:'bundle.js'
    },
    devServer:{ //devserver命令参数得 第二种方式 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
        open:true, //自动打开浏览器
        port:3000, //设置启动运行端口
        // contentBase:'src',  //指定托管根目录
        hot:true  //启动热更新 第一步
    }
}

注意：若devServer设置了 托管跟目录，则访问不到layui得任何内置模块
分析：托管目录 devServer打包生成bundle.js文件，并没有放到实际物理磁盘上，而是托管到内存中
解决：注掉托管目录，则可以访问到内置模块

5. 生成内存页面，并自动将打包好的bundle.js追加到页面中

npm install html-webpack-plugin -D实现生成内存页面，并自动引入
在webpack.config.js增加配置
plugins:[
        new webpack.HotModuleReplacementPlugin(), //启用热更新第二步
        new htmlwebpackplugin({ //创建 在内存中生成html插件
           template:path.join(__dirname,'./src/index.html'),
           filename:'index.html' //指定生成页面得名称
        })
],

6. 安装相应loader并配置加载器,识别非js类型文件

cnpm i style-loader css-loader file-loader url-loader-D 引入css装载器
在webpack.config.js增加配置
 module:{//配置所有第三方模块 加载器
        rules:[
            { test: /\.css$/ , use:['style-loader','css-loader']}, //处理.css文件的 
            { test: /\.(jpg|png|gif|jpeg)$/ , use:'url-loader?limit=651242&name=[hash:8]-[name].[ext]'},  //处理图片文件的loader  url-loader file-loader
            //如果给定图片<limit，则会转为Base64格式字符串
            { test: /\.(ttf|eot|svg|woff|woff2)$/ , use:'url-loader'}, //处理字体类型文件
        ]
}