webpack使用一

1、创建一个列表各行变色的项目

创建空项目，并运行npm init -y 命令，初始化包管理配置文件 package.json
新建src文件夹
创建 index.HTML 页面

初始化页面基本结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表各行变色</title>
    <script src="index.js"></script>  
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
</body>
</html>

运行npm install jquery -S 命令，安装jquery

通过模块化形式，实现列表隔行变色问题

import $ from 'jQuery'   //这是es6语法，页面会报错，这时我们可以使用webpack进行处理了

$(function(){
   $("li:odd").css("color","pink");
   $("li:even").css("color","red");
});

2、项目安装配置webpack

运行npm install webpack@4.29.0 webpack-cli@3.2.1 -D命令，安装webpack 相关的包（分开运行）
在项目跟目录中，创建名为webpack.config.js 的 webpack 配置文件

在上面webpack 的配置文件中，初始化如下基本配置：

module.exports = {
    mode:"development" //mode 用来指定构建模式，development 表示开发环境，不会使文件压缩，混淆
    	 // production  生产环境
}

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

“scripts”:{
    "dev":"webpack" //script 节点下的脚本，可以通过 npm run 执行
}

在终端中运行 npm run dev 命令，启动webpack 进行项目的打包
这时目录生成 dist/main.js 。index.html引入的js改成这个main.js文件就可以了。

3、配置打包的入口与出口

webpack 的4.x版本中默认约定：

打包的入口文件为 src -> index.js
打包的输出文件为 dist -> main.js

如果要修改打包的入口与出口，可以在webpack.config.js 中新增如下配置信息

const path = require('path') //导入node.js 中专门操作路径的模块
module.exports = {
    mode:"development",
    
    // __dirname 为当前目录
    entry:path.join(__dirname,"./src/index.js"),//打包入口文件的路径
    output:{
        path:path.join(__dirname,"./dist"), // 输出文件的存放路径
        filename:"bundle.js"  //输出文件的名称
    }
}

4、自动打包功能

运行 npm install webpack-dev-server@3.11.0 -D 命令，安装支持项目自动打包的工具

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

"scripts":{
    "dev":"webpack-dev-server" //script 节点下的脚本，可以通过 npm run执行
}

将 src 下面的 index.html 中，script 脚本的引用路径，修改为“/buldle.js”
运行npm run dev 命令，重新进行打包
在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：

webpack-dev-server 会启动一个实时打包的http服务器
webpack-dev-server 打包生成的输出文件，默认当到了项目根目录中，而且是虚拟的、看不见的。所以index.html 的 script 是 "/buldle.js"

**报错： Error: Cannot find module 'webpack-cli/bin/config-yargs' **

版本过高，解决方案：

卸载当前的 webpack-cli npm uninstall webpack-cli
安装 webpack-cli 3.* 版本 npm install webpack-cli@3 -D

5、生成预览页面

这时生成的域名和端口号，不是真正我们想预览的页面，而是我们项目的目录，如果想直接预览我们的页面，这时我们就需要 html-webpack-plugin 了

运行 npm install html-webpack-plugin -D命令,安装生成预览页面的插件

修改 webpack. config.js文件头部区域，添加如下配置信息:

//导入生成预览页面的插件，得到一个构造函数
const HtmlwebpackPlugin = require ('html-webpack-plugin')
const htmlPlugin = new HtmlwebpackPlugin({ //创建插件的实例对象
	template:index选项卡.html, //指定要用到的模板文件
	filename:index选项卡.html    //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

修改 webpack. config. js文件中向外暴露的配置对象，新增如下配置节点:

module.exports = {
	plugins: [htmlPlugin] // plugins 数组是webpack 打包期间会用到的一些插件列表
}

6、自动打包开启 8080端口页面

// package. json中的配置
// --open 打包完成后自动打开浏览器页面  
// --host配置IP地址   （默认 localhost）
// --port配置端口     （默认 8080）

"scripts": {
	"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

posted @ 2021-01-13 21:34 火烧云Z 阅读(99) 评论(0) 收藏举报

刷新页面返回顶部

火烧云

webpack使用一

webpack使用一

1、创建一个列表各行变色的项目

2、项目安装配置webpack

3、配置打包的入口与出口

4、自动打包功能

5、生成预览页面

6、自动打包开启 8080端口页面

公告