二次开发创造作用,梁水才seo优化专家,app推广渠道,鹰潭律师网站建设概述
webpack是一个流行的前端项目构建工具#xff08;打包工具#xff09;#xff0c;可以解决当前web开发中所面临的问题。 webpack提供了友好的模块化支持#xff0c;以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能#xff0c;从而让程序员把工作重心放到具…概述
webpack是一个流行的前端项目构建工具打包工具可以解决当前web开发中所面临的问题。 webpack提供了友好的模块化支持以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能从而让程序员把工作重心放到具体的功能实现上提高了开发效率和项目的可维护性。
webpack的基本使用
创建列表各行变色项目 ①新建项目空白目录并运行npm init -y命令初始化包管理配置文件package.json ②新建src源代码目录 ③新建src-index.html首页 ④初始化首页基本的结构即给index.html添加如下内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script src./index.js/script --script src../dist/main.js/script
/head
bodyulli这是第1个标签/lili这是第2个标签/lili这是第3个标签/lili这是第4个标签/lili这是第5个标签/lili这是第6个标签/lili这是第7个标签/lili这是第8个标签/lili这是第9个标签/li/ul
/body
/html⑤运行npm install jquery -s命令安装jQuery ⑥通过模块化的形式实现列表隔行变色的效果 创建一个index.js文件加入以下内容
import $ from jquery
//给奇偶行设置不同的背景色
$(function(){$(li:odd).css(backgroundColor,pink)$(li:even).css(backgroundColor,green)
})然后在index.html文件中通过以下命令将index.js引入进来
script src./index.js/script但是我们通过浏览器查看发现列表变色并没有设置成功这是因为index.js里面的内容是ES6的书写格式浏览器不识别这个时候我们可以使用webpack进行打包将没有兼容性的代码转化为有兼容性的代码最后在index.html中引入的应该是我们使用webpack转换后的js代码具体操作见下述2 2. 在项目中安装和配置webpack ①运行npm install webpack webpack-cli -D命令安装webpack相关的包 ②在项目根目录中创建名为webpack.config.js的webpack配置文件 ③在webpack配置文件中初始化如下基本配置
module.exports{mode:development //mode用来指定构建模式
}④在package.json配置文件中的scripts节点下新增dev脚本如下
scripts:{dev:webpack //scripts节点下的脚本可以通过npm run 执行
}⑤在终端执行npm run dev命令启动webpack进行项目打包 执行完这个命令后会在根目录生成一个dist文件夹文件夹中有一个main.js文件就是我们转换后的文件将这个文件引入index.html中就能够实现上述的列表变色了
