摘要：基础配置打包多个文件继续基础配置的内容，在目录下再新建一个文件在文件中引用开发模式进行打包同样在中引入打包后的文件打开控制台，正确输出如下引用文件在路径下新建一个目录，其下创建一个文件，内容如下在中引入文件默认情况是不支持文件的，因此需要安
Webpack 基础配置02 打包多个js文件
继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js文件
在main.js文件中引用demo.js
开发模式进行打包
npm run dev
同样在index.html中引入打包后的js文件bundle.js
打开控制台，正确输出如下：
在src路径下新建一个目录css，其下创建一个style.css文件，内容如下：
在main.js中引入css文件
默认情况webpack是不支持css文件的，因此需要安装style-loader和css-loader插件,loader是支持打包的工具
css-loader：用来加载css文件的
style-loader: 支持css运行
安装style-loader和css-loader
npm install style-loader css-loader --save-dev
安装成功后需要在引用css文件的地方添加代码如下：
require("style-loader!css-loader!../css/style.css")
注意：style-loader!css-loader!这个顺序不能颠倒！
开始运行:
npm run dev
到这里，打包多个js文件和css文件就成功了！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102046.html
摘要：配置文件中设置引入文件之前讲过在引用文件的时候可以引入和，诸如这样现在提供一种更常用和更便捷的方法。同样先在项目文件夹下安装和模块配置文件如下选项用来处理对应的模块用正则匹配所有的文件使用模块这样就已经可以正常打包文件了。 配置文件中设置引入css文件 之前讲过在引用css文件的时候可以引入style-loader和css=loader，诸如这样： require(style-load...
摘要：多入口多出口初始化项目，搭建基础目录配置配置文件引入中的模块，可配置多个入口文件解决行命令的目录和不在同一个目录时造成的容错率问题，用绝对路径同样有效对应你入口文件的，也就是属性名配置以开发模式运行打包成功打包后查看输出文件，会发现 webpack4 多入口多出口 初始化webpack项目，搭建基础目录showImg(https://segmentfault.com/img/bVbo...
阅读 868·2021-11-22 09:34
阅读 1002·2021-10-08 10:16
阅读 1815·2021-07-25 21:42
阅读 1789·2019-08-30 15:53
阅读 3518·2019-08-30 13:08
阅读 2173·2019-08-29 17:30
阅读 3340·2019-08-29 17:22
阅读 2172·2019-08-29 15:35
