前端工程化---2.webpack使用 实例、配置打包出入口

webpack初次使用示例—隔行变色li

1. 创建空白项目TestWebpack，并执行npm init -y命令，在项目中自动生成package.json文件
2. 在 项目根目录下新建src目录，并 在其中新建index.html输入ul>li{这是第$个li}并Tab。
3. 安装jQuery，npm install jquery -S
4. 在src目录下新建index.js

import $ from 'jquery'
$(function (){
  $('li:odd').css('background','pink');
  $('li:even').css('background','skyblue');
})

5. 在index.html中引入此js,发现不生效

配置安装webpack

1. 安装npm install webpack webpack-cli -D
2. 根目录下创建webpack.config.js

import $ from 'jquery'
$(function (){
    $('li:odd').css('background','pink');
    $('li:even').css('background','skyblue');
})

3. 在package.json的scripts节点下新增

 "dev": "webpack"

4.执行npm run dev进行打包，webpack将自动创建目录dict和main.js文件，在index.html中改为引入此js文件，生效，示例完成。

配置webpack打包出入口

1.webpack默认打包入口为src/index.js
2.webpack默认打包出口为dist/main.js
3.修改打包 出入口，在webpack.config.js中进行如下配置

// 导入node.js中负责操作路径的 模块
const path = require('path')

module.exports = {
   //编译模式
   mode: "development",
   //打包入口
   entry: path.join(__dirname,  './src/index.js'),
   //打包出口
   output: {
       path: path.join(__dirname,'./dist'),
       filename: "bundle.js"
   }
}