webpack打包的基本使用及配置自动打包

一、创建一个隔行变色的项目

1.新建项目空白目录webpack_test，并运行npm init -y 命令，初始化包管理配置文件 pacakge.json

2.新建src源代码目录

3.新建src——>index.html

4.初始化首页基本结构

5.运行npm i jquery -s 命令，安装jquery

6.通过模块化的形式，实现列表隔行变色效果

二、在项目中安装和配置webpack

1、运行npm i webpack webpack-cli -D

2、在项目根目录中，创建webpack.config.js的ebpack配置文件

3、在webpack配置文件里面初始化如下配置

module.exports={
    mode:"development" //devcelopment product
}

4、在package.json配置文件中的scripts节点下，新增dev脚本如下

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

5、在终端运行npm run dev  启动webpack进行项目打包

6、配置webpack自动打包功能

运行npm i webpack-dev-server -D ,安装支持项目自动打包的工具

修改package.json->scripts中的dev命令如下：

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

将src->index.html中。script脚本的引用路径，修改为"/build.js"

运型npm run dev ,重新打包

在浏览器中访问http://localhost:8080地址，查看自动打包的效果