Webpack基本使用
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
使用
npm install -g webpack//全局安装
cd到项目文件夹
npm init 初始化
npm install --save-dev webpack//安装到你的项目目录
npm install –g webpack-cli
npm install –save-dev webpack-cli
初体验
文件夹创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件
index.html --放在public文件夹中;
greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;
创建文件
- index.html
在index.html文件中写入最基础的html代码，它在这里目引入打包后的js文件(命名为bundle.js名字不能错)
<div id='root'></div>
<script src="bundle.js"></script>
2.Greeter.js中定义一个返回包含一些内容的html元素的函数,并导出这个函数为一个模块
module.exports = function() {
var greet = document.createElement('div');
//textContent 设置制定节点的文本内容
greet.textContent = "我是内容";
return greet;
};
3.main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
4运行
在cmd中cd到当前项目文件夹中
webpack 空格入口文件的路径，就是main.js的路径空格 打包文件的存放路径（要手工创建一个bundle.js文件并且存放的路径要到当前文件）
可能会提示webpack-cli没有下载 cnpm install -g webpack-cli下载
再次执行可能会出现如下问题
上的警告指的是没有设定是开发模式还是生产模式,要求指定
只需要在项目中的package.json中script中配置上
"dev": "webpack --mode development", "build": "webpack --mode production"
再次运行即可
运行index.html即可看到打包内容
通过配置文件来使用Webpack下次发布
