2.前端工程化-webpack

最新推荐文章于 2023-11-29 15:30:30 发布

世界，太精彩

最新推荐文章于 2023-11-29 15:30:30 发布

阅读量138

点赞数

分类专栏：模块化 webpack深入理解文章标签： webpack

本文链接：https://blog.csdn.net/yifanfengshun3333/article/details/117250859

版权

webpack2.1 概述webpack是目前流行的前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等强大功能，提高了开发效率和项目的可维护性。2.2 webpack使用1.新建项目，npm init -y 初始化包管理配置文件package.json2.新建src 目录，新建index.html,引入index.js<!DOCTYPE html><html lang="en"><head> <

摘要由CSDN通过智能技术生成

webpack

2.1 概述

webpack是目前流行的前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等强大功能，提高了开发效率和项目的可维护性。

2.2 webpack使用

1.新建项目，npm init -y 初始化包管理配置文件package.json

2.新建src 目录，新建index.html,引入index.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./index.js"></script>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>
</html>

3.npm i jquery -S

4.新建src/index.js

import $ from "jquery";
$(function(){
    $('li:odd').css('backgroundColor','pink');
    $('li:even').css('backgroundColor','blue')
})

运行会提示报错，原因是import $ from "jquery";是es6语法，浏览器不识别。我们需要通过webpack将代码转化为浏览器能够兼容的代码。

2.3 项目中配置和使用webpack

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

2.在根目录下创建webpack.config.js文件，在执行webpack时会优先从用户自定义的配置文件中调用

// webpack.config.js

module.exports = {
  mode:"development" //指定构建模式，development(开发模式)：不会打包压缩混淆，production(发布模式)：会打包压缩混淆。
}

3.修改package.json文件

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

执行npm run dev，进行项目的打包，会生成一个dist文件夹，index.js打包后在dist目录生成了main.js文件。


> webpack_demo@1.0.0 dev webpack_demo
> webpack

asset main.js 2.99 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
./src/index.js 67 bytes [built] [code generated]
webpack 5.37.1 compiled successfully in 101 ms

在index.html中，把引入index.js修改为引入打包后的文件main.js

<script src=&#

最低0.47元/天解锁文章

世界，太精彩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.前端工程化-webpack

webpack2.1 概述webpack是目前流行的前端项目构建工具（打包工具），提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等强大功能，提高了开发效率和项目的可维护性。2.2 webpack使用1.新建项目，npm init -y 初始化包管理配置文件package.json2.新建src 目录，新建index.html,引入index.js<!DOCTYPE html><html lang="en"><head> &lt
复制链接

扫一扫

专栏目录