webpack项目打包——以列表隔行变色项目为例

1.首先新建一个空白文件夹，在终端打开

2.初始化包管理：执行命令npm init -y

npm init -y

 执行后结果：（执行后悔自动生成一个package.json的文件）

3.新建src源代码目录，并在src下创建首页index.html,并初始化页面结构

4.安装JQuery，在终端运行下面命令：(注意是安装jquery,而不是jQuery)

npm install jquery -S

结果如下：

 5。安装jQuery后，在src下l的index.js文件，并引入到index.html文件中

index.js文件代码：

import $ from 'jquery'

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

在index.html中引入index.js文件

然而引入之后刷新页面并没有看到各行变色的效果

 

 

进行打包

 

6.安装webpack，

npm install webpack webpack-cli --save-dev

7.在项目的根目录下，创建名为webpack.config.js的webpack配置文件，并写入配置，

这里mode有两种方式，一种是development 模式（开发模式），还有一种是   模式

在开发阶段，建议使用development模式，开发模式在项目进行打包后，看到的代码可读性较高，

另外一种模式在开发完毕之后，再使用。（打包后代码可读性不强，但是文件大小较小）

8。在package.json配置文件中的script节点下，新增Dev脚本如下：

9.打包，运行npm run dev 

npm run dev

如果出现下面错误：

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'jsdom' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
 @ ./node_modules/jquery/lib/node-jquery.js 5:13-29
 @ ./src/index.js

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
 @ ./node_modules/jquery/lib/node-jquery.js 13:24-43
 @ ./src/index.js

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
 @ ./node_modules/jquery/lib/node-jquery.js 17:25-45
 @ ./src/index.js

ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest' in 'E:\Users\Administrator\Desktop\webpack笔记\node_modules\jquery\lib'
 @ ./node_modules/jquery/lib/node-jquery.js 8:28-53
 @ ./src/index.js

检查一下jQuery是不是安装错了，上面已经提醒了，npm install jquery -S,而不是 npm install jQuery -S

安装错误，先卸载jQuery （npm uninstall jQuery）,再安装（npm install jquery -S）

 10.打包成功之后，会在文件列表中多一个 dist 文件夹：打开main.js就可以看到打包后的代码

11.此时，将打包生成的main.js文件引入到index.html中，保存代码刷新页面后，就可以看到列表隔行变色的效果就出来了

 

怎样改变打包的入口文件（index.js） 和出口文件（main.js）呢？

在webpack.config.js 配置文件中，写入以下代码就可以了

entry 写入打包文件的入口文件

output中写出口文件 ，在出口文件中需要配置文件 的存放路径和输出文件的名称。

const path = require('path')
module.exports = {
    // 编译模式
    mode:'development',
    // 配置打包的入口和出口文件
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        // 输出文件的存放路径
        path:path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename:'bundle.js'
    }
}

 此时再次运行  npm run dev ,结果如下：（dist文件夹下新增bundle.js文件），

将bundle.js引入到index.html文件中，刷新页面后，项目正常运行

 

 

 如果想改变每一行的颜色，在改变js代码之后，需要重新运行npm run dev。若多次改变js代码，就需要跟品盘的重新打包，此时

配置webpack的自动打包配置

12.安装支持项目自动打包的工具webpack-dev-server

npm install webpack-dev-server --save-dev

 13.成功之后，在package.json配置文件中修改scripts中的dev 为：webpack-dev-server

14.将src下的index.html文件中的script脚本的引用路径改为 "/bundle.js"

15.运行 npm run dev 重新进行打包

16.从上面可以看到项目运行在  httpa;//localhost:8080/上，进入可看到：

 点击箭头所指src，可打开index.html页面，看到下面结果：

【注】： webpack-dev-server会启动一个实时打包的http服务器

                webpack-dev-server 打包生成的输出文件，默认放到了项目 的根目录汇总，而且是虚拟的，

 

直接预览页面

 

17.安装可以直接预览页面的插件。html-webpack-plugin

npm install html-webpack-plugin --save-dev

18.安装成功之后，配置webpack.config.js配置文件（//***************之间的代码）

const path = require('path')

// ******************
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    template:'./src/index.html',
    filename:'index.html'
})
//******************
module.exports = {
    // 编译模式
    mode:'development',
    // 配置打包的入口和出口文件
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        // 输出文件的存放路径
        path:path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename:'bundle.js'
    },

//*************************
    plugins:[htmlPlugin]
//***************************
}

19.配置完毕后，重新运行项目，

npm run dev

运行成功后，直接打开http://loaclhost:8080/页面，就可以看到预览页面了

 运行项目成功之后，自动调出浏览器显示页面

20.在package.json中的scripts下配置

"dev": "webpack-dev-server --open"

21.如果想改变ip地址和端口号，按以下方式配置：（host配置IP地址，port配置端口号）

 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"