提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
webpack自我整理的归纳
一、什么是webpack,它有什么作用？
webpack是前端工程化工具，它能把各种资源，例如 JS（含 JSX）、coffee、样式（含 less/sass）、图片等都作为模块来使用和处理。
这些不同格式的模块，在经过webpack打包之后，就生成右边统一的静态资源，也可以把需要的文件进行合并、压缩。
二、webpack的主要适用场景
SPA(单页面富应用)
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>webpack SPA</title>
<link rel=‘styleSheet’ href="dist/main.css"></link>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
这个html页面只有一个div节点，所有代码都集中在main.js中，
与webpack相关的两个语法 export & import
export是用来定义导出模块的
import是用来引用模块的
具体的内容可以看这篇文章（当然现在还没写）
webpack安装与配置
全局安装 webpack
npm install webpack –g
局部安装
npm install webpack --save-dev //这句安装webpack
npm install webpack-dev-server --save-dev //这句安装的是webpack-dev-server，它可以在开发环境中提供很多服务，启动一个服务器，热更新，接口代理等等
接下来，不管你使用的是全局安装还是局部安装，都要在项目根路径下配置一个个 webpack.config.js
下面是内容举例(咱们以局部配置为例)
var path = require('path')
var config = {
// 页面入口文件配置
entry: {
index : './main' //这个就是我们配置的单入口，webpack会从这个main.js开始工作
},
// 入口文件输出配置
output: {
path: path.join(_dirname,'./dist'), // 存放打包后文件的输出目录
publicPath:'/dist/',//指定资源文件引用的目录，
filename: 'mian.js' // 设置输出文件名字，此例中为入口文件名字加上
},
};
module.exports = config;
转载：https://blog.csdn.net/weixin_43894901/article/details/117025451
查看评论