Vue系列之 => webpack基础使用

webpack安装方式

1，运行 npm i webpack -g 全局安装。

2，在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中

项目目录

进入src运行，

npm init -y 生成package.json配置文件。

npm i jquery -s 安装jquery依赖

运行webpack打包如出现错误：

手动安装 webpack-cli 。

打包成功

这里不知道为什么，后面生成的文件名始终是main.js可能是webpack新版本的特性吧。在index.html中引入dist目录下的main.js文件即可。

使用webpack配置文件。在项目根目录下新建webpack.config.js 并编辑

 const path = require('path'); //导入path模块

 module.exports = {
   mode : 'development',
   entry : path.join(__dirname,'./src/main.js'),//入口
   output : { //输出文件相关的配置
     path : path.join(__dirname,'./dist'),//指定打包好的文件输出到哪个目录中去
     filename : 'bundle.js' //指定输出的文件的名称
   }
 }