Webpack(续)

1.Webpack中css文件的配置

webpack可以实现基本的js代码的处理，但是对于加载css，图片，或者将高级的ES6转成ES5代码等操作，还需要给webpack扩展对应的loader
loader的使用过程
①通过npm安装需要使用的loader
npm install --save-dev css-[email protected]
npm install --save-dev [email protected]
②在webpack.config.js中的module关键字下面配置
操作可参考官网：官网链接

在上一篇文章的例子的基础上
添加
normal.css

body {
  background-color: cornflowerblue;
}

修改main.js

//1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtil.js')

console.log(add(2,3));
console.log(mul(5,6));

//2.使用ES6的模块化规范
import {name,age,height} from "./js/info";

console.log(name);
console.log(age);
console.log(height);

//3.依赖css文件
require('./css/normal.css')

修改webpack.config.js

const path = require('path')  //从node包里面找path,path其实是一个模块

module.exports={
  entry:'./src/main.js',     //入口
  output: {     //出口
    path: path.resolve(__dirname, 'dist'),//动态获取路径,resolve函数用来做路径的拼接,__direname是node里面的全局变量，存放当前文件的路径
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,      //作用匹配所有css文件（语法：正则表达式）
        //css-loader只负责对css文件的加载
        //style-loader负责将样式添加到DOM中
        //使用多个loader时，从右向左加载
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

最后修改完记得重新打包：npm run build