1.打包js

webpack.config.js的配置

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

webpack.config.js文件如下:

webpack.config.js的配置

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

webpack.config.js的配置

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

2.webpack打包css文件

webpack.config.js的配置

首先,cnpm style-loader css-loader

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

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

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

main.js

webpack.config.js的配置

calc.js

webpack.config.js的配置

index.html

webpack.config.js的配置

site.css

webpack.config.js的配置

webpack.config.js

webpack.config.js的配置

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

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

webpack.config.js的配置

页面效果如图:

webpack.config.js的配置

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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-29
  • 2021-08-10
  • 2022-12-23
猜你喜欢
  • 2021-09-19
  • 2022-12-23
  • 2022-12-23
  • 2021-06-02
  • 2022-02-10
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案