webpack教程--01打包初体验

"webpack": "^4.20.2",

首先，新建这样一个项目，代码如下，注意a.js,b.js,c.js类似；

 接着在src同级的目录下，新建一个webpack.config.dev.js文件，添加以下代码，同时新建dist目录。如下所示

在控制台运行 npm init -y,会出现一个package.json文件

接着安装开发的依赖npm i -D webpack,会出现一个node_modules的包,如下所示。

接着打开package,json文件，添加下面一行代码

接着在终端运行npm run dev ,出现是否要安装webpack-cli，选择yes

接着执行成功，但是会出现下面的警告，是问你处在开发环境中还是生产环境中

所以打开webpack.config.dev.js,添加以下代码

接着运行npn run dev，就不会出现警告。

注意，如果想用老版本的webpack就可以这样安装 npm i -D webpack@3。当然因为刚才安装了4的版本，所以需要删掉cli和mode的地方，接着运行 npm run dev就不会有问题了。

还有最后一步，在dist目录下新建index.html文件，修改引入js文件为main.js

运行这个index.html文件控制台就会出现