webpack.config.js的配置

1.打包js

main.js calc.js index.html同上篇文章webpack打包计算器。

webpack.config.js文件如下：

在文件根目录打开windows powershell输入webpack见下图即成功

在浏览器打开index.html文件，F12后console下输出3,network下显示index.html,build.js。

2.webpack打包css文件

首先，cnpm style-loader css-loader

其次，cnpm extract-text-webpack-plugin --save-dev

//此命令后会生成node_modules文件夹及package.json文件。

最后，上代码(文件较少，暂全部放在根目录下)。

main.js

calc.js

index.html

site.css

webpack.config.js

文件根目录下打开windows powershell输入webpack

对比上例webpack后图片可发现多打包了css文件。

页面效果如图：

红色边框表示css打包成功，计算功能也正确。