Webpack基础配置

创建项目文件
创建src
创建dist
创建webpack.config.js

在src下
创建index.html
！快捷初始化
ul>li*10{这是第$个li}

创建main.js

//JS打包入口
//隔行变色

import $ from 'jquery';

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

npm init -y
初始化包配置文件package.json

安装jquery文件
yarn add jquery
package文件生成相关配置

打包配置文件
webpack.config.js

const path=require('path')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

安装实时代码更新插件
yarn add webpack --dev
yarn add webpack-dev-server html-webpack-plugin --dev

const path = require('path')

const htmlWedpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [//插件
        new htmlWedpackPlugin({
            template: path.join(__dirname, './src/index.html'),
            filename: 'index.html'
        })
    ]
}

配置启动项
“dev”: “webpack-dev-server --open --port 3000 --hot”

安装脚手架 npm i webpack-cli -D

启动

npm run dev