webpack 使用入门

webpack是一个模块化打包工具，可以把你的js文件，还有样式资源打包成一个整体。

先来看一个简单实例。（前提条件是 安装 nodejs  、npm ，ide工具 webstorm）

使用webstorm创建一个空项目：Webpack-HelloWorld

 

 terminal下输入 npm init 为项目添加package.json

按照提示建立package.json文件。完成后，项目下多了一个package.json文件。内容如下：

项目根目录下分别创建src文件夹和public文件夹，并在src文件夹中新建index.js文件，内容如下：

terminal下安装 webpack

npm install webpack --save-dev

 安装完成后，输入命令进行打包

webpack src/index.js public/bundle.js

命令中src/index.js 为要进行打包的文件， public/bundle.js 为打包后的文件。

 

运行命令出错，是因为 新的webpack 版本 打包命令已经变了，将上边的命令改为

webpack src/index.js -o public/bundle.js

打包成功，但是还有一个警告，需要设置 打包的mode  mode有两种：production生产模式 development开发模式。将命令改为 

webpack src/index.js -o public/bundle.js --mode development

 警告消失。查看项目，public目录下出现bundle.js 文件，这就是webpack把index.js 打包后转化的文件。

在public 下创建index.html文件，并引入bundle.js,并调试index.html，弹出hello world 提示框。

如果只是这样用，和直接将index.js 引入index.html 是没有区别的，

但是如果js文件特别多，那么就要引用无数的js文件，管理起来非常麻烦。所以这是webpack的作用就体现出来。

在src文件下载添加demo.js,内容如下：

alert("demo test");

index.js 文件修改如下：

const demo = require('./demo.js');

function sayHello(){
    alert("Hello world");

};
sayHello();

 执行命令

webpack src/index.js -o pblic/bundle.js --mode development

结果如下： 

 

调试index.html,可以看到页面分别弹出demo test 和 hello world，这说明webpack将demo.js 和index.js 打包到一个文件bundle.js中了，只需要引用bundle.js文件即可。

 

2. Webpack-cli使用

项目下安装webpack-cli，运行如下命令

npm install webpack-cli --save-dev

 webpack-cli会默认打包src文件夹下的index.js文件,打包完成后在dist文件加下创建main.js文件。运行webpack命令

webpack   //默认生成production模式的js文件。

或者

webpack --mode development 

生成后的js文件如下：