Webpack 4.X 从入门到精通 - module（四）

概念

在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader

loader就像是一个翻译员，浏览器不是不认识这些东西么?那好交给loader来办，它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块，而这些模块想要打包loader必不可少，所以它在webpack里显得异常重要。loader跟插件一样都是模块，想要用它需要先安装它，使用的时候把它放在module.rules参数里，rules翻译过来的意思就是规则，所以也可以认为loader就是一个用来处理不同文件的规则

文件目录

这节课需要用到图片跟样式，所以我要按传统的目录结构来创建目录，目录如下
结构目录

处理CSS

所需loader

style-loader   //把处理完的css放到style标签里
css-loader     //处理css

安装

npm i style-loader css-loader -D

index.css文件内容如下：

#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    background: green;
}

index.js文件内容如下：

import '../css/index.css';  //两个点是找上级目录

通过前面的课程大家要明白，webpack的入口文件是index.js，如果要处理其它类型的文件，就需要在入口文件里把其它类型的文件导入进来，而在webpack中所有文件都是模块，所以可以使用require或者import导入其它文件

package.json文件内容如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html