本文详细介绍了webpack作为前端项目构建工具的作用，包括解决文件依赖、浏览器兼容性等问题。讲解了npm安装、webpack配置、自动打包、入口出口设置、html-webpack-plugin配置以及加载器的使用，如style-loader、css-loader、less-loader等。
一、webpack
1.简介
webpack是一个流行的前端项目构建工具（打包工具），因为我们目前web开发会有下面几个问题：
- 文件之间互相依赖关系复杂
- 浏览器对于Es6的模块化支持不是很友好
- 浏览器对于js的新语法特性兼容性也不是很好
webpack可以解决上述问题。
2.npm补充
两者都会安装到项目文件夹下的node_modules文件夹下
- npm install xx -D 即写入devDependencies对象（里面的插件只用于开发环境，不用于生产环境）
- save开头——开发和生产环境，记住这个就行 npm install xx -S 即写入dependencies对象（生产环境）
比如我们jquery是项目打包后还需要使用的我们用
npm install jquery -S
我们的less 是开发的时候用，项目上线以后使用的转换侯的css代码，所以我们用
npm install less -D
3.为什么使用webpack
使用npm init -y初始化package.json文件
npm install jquery -S 安装jquery包
新建src文件夹,里面index.html代码如下：
<head>
<script src="index.js"></script>
</head>
<body>
<div id="box"></div>
</body>src文件夹中新建index.js代码如下：
import $ from "jquery";
$(function() {
$("#box").css("color", "red");
});
此时浏览器访
最低0.47元/天 解锁文章
扫一扫
387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
