ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] #### 1,先安装nodejs 下载地址http://nodejs.cn #### 2.安装全局的webpack npm install -g webpack #### 3.进入开发目录初始化项目 npm init #### 4.安装依赖项 npm install --save-dev #### 5.在项目文件中创建webpack.config.js文件 内容如下 module.exports = { //__dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录 //入口文件 entry:__dirname+'/app/main.js', //输出地址 output:{ //输出目录 path:__dirname+'/public', //输出文件名称 filename:'webpack.js' } } 运行:webpack 结果如下 ![](https://box.kancloud.cn/f00f1427be0185578eb24ad812a35ff2_1172x565.png =600x400) #### 6.loaders的使用 ![](https://box.kancloud.cn/054d33c0b96ee7eeaa962df2ccd824ae_817x516.png) 安装loader npm install --save-dev json-loader ![](https://box.kancloud.cn/a7f26e4c05545f57bdb71bf8e0fdd65e_912x481.png) #### 7.webpack 对css的操作 ![](https://box.kancloud.cn/68ef7c34999c316e08a86156568034c8_791x554.png) ![](https://box.kancloud.cn/a6541aeb0f786504909f830aa78ea599_795x480.png) #### 8.Babel的安装与配置 ![](https://box.kancloud.cn/fa5f122066e37651740d309aa55d1945_802x445.png) #### 9.插件的使用 ![](https://box.kancloud.cn/1f741e6f98c76094db63ff7420889962_880x557.png) ![](https://box.kancloud.cn/e677a342058649fac92742b7e8a74751_806x479.png) #### 10.webpack之webpack-dev-server自动刷新页面 ![](https://box.kancloud.cn/ee77665346b327e407ab752b5266a101_551x351.png) ![](https://box.kancloud.cn/fd0ad1127b6c0676a68fdb2d681e219c_903x527.png)