webpack作为当前最火的 前端项目构建工具，目前已经更新到了第四代版本，第五代也在开发中
在桌面上 新建立一个 空的文件夹 就叫做webpack吧
在开始之前确保你的电脑上有 最新的node.js环境
1.初始化项目 （进入文件夹内部 鼠标右键打开powershell）
npm init 一路回车到底
2.安装依赖包
npm i -D webpack // i install 的简称 -D --save-dev的简称
npm i -D webpack-cli
3.在当前文件夹下
新建立一个 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
<!-- 导入webpack输出的javascript文件 -->
<script src="./dist/bundle.js"></script>
<!-- npm install extract-text-webpack-plugin@next -->
</html>
4.在当前文件夹下新建立一个 index.js文件
function show(content){
window.document.getElementById('app').innerHTML='Hello,'+content;
}
// 通过 CommonJS 规范导出show函数
module.exports=show;
5.在当前文件夹下新建立一个index.css文件
#app{ // 设置文字居中
text-align: center;
}
6.当前文件夹下新建立一个main.js,在main.js中引入 index.js和index.css文件
// 通过CommonIS引入CSS模块
require('./index.css')
// 通过CommonJS规范导入show方法
const show=require('./index.js');
// 执行show方法
show('Webpack');
7.配置 webpack.config.js
在当前文件夹下 新建 webpack.config.js
const path=require("path");
module.exports={
// Javascript 执行入口文件
entry:"./main.js",
output:{
/ 将所有的依赖的模块合并并输出到一个 bundle.js文件中
filename:"bundle.js",
// 将所有的输出文件都放到dist目录下
path:path.resolve(__dirname,'./dist'),
},
module:{
[
test:/\.css$/,
use:['style-loader','css-loader']
]
}
}
8.书写完之后 我们还需要安装 css-loader 和style-loader加载器
npm i -D style-loader css-loader
js是不会执行css文件 所以通过webpack里面的加载器 将里面的css提取输出 并转换成dom操作
css-loader 是提取css文件 style-loader是将其渲染到浏览器上 通过dom操作
9.修改package.json文件
打开package.json文件 在scripts 里面添加上这句话 可以通过npm run start 简化 webpack的运行命令
"start": "webpack --mode development --config webpack.config.js", // -mode development是指当前是 开发环境
--config 是运行之后 他会按照 webconfig-config.js文件中的配置 执行打包命令
10.最后祝大家运行成功
在命令行中 执行 npm run start 看见浏览器中出现 居中的Hello webpack就说明成功
