webpack学习（一）：初步配置webpack

demo地址: https://github.com/Lkkkkkkg/webpack-demo

全局安装

npm install --global webpack // --global代表全局安装

本地安装

对于大多数项目, 我们建议本地安装, 这可以使我们在引入破坏式变更(breaking change)的依赖时, 更容易分别升级项目

npm install webpack // --global代表全局安装

开始搭建

先创建一个目录 demo01 , 初始化 npm , 再本地安装 webpack 和 webpack-cli (如果使用 webpack 4+ 版本, 你还需要安装 webpack-cli , webpack-cli 是用于在命令行中运行 webpack )

mkdir demo01 //创建一个目录demo01
cd demo01 //进入demo01
npm -init -y //初始化npm, -y代表参数全部默认
npm install webpack webpack-cli --save-dev //这里本地安装webpack和webpack-cli, --save-dev代表保存在package.json文件里

配置 webpack 目录结构

接下来将创建一个如下的文件目录

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
|- package.json
|- webpack.config.js //web