Webpack4 高手之路 第二天

Webpack 基础配置02

---

打包多个js文件

• 继续Webpack 基础配置01的内容，在./src/script目录下再新建一个demo.js文件

• 在main.js文件中引用demo.js

• 开发模式进行打包
  npm run dev
  
• 同样在index.html中引入打包后的js文件bundle.js
• 打开控制台，正确输出如下：
  

引用css文件

• 在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文件就成功了！