生成好package.json后我们可以使用npm run build来打包我们的项目。当我们执行npm run build时它首先会去我们局部的webpack中去寻找命令，如果找不到再去全局寻找
7.loaderloader是webpack中一个非常核心的概念。webpack用来做什么呢？在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。对于webpack本身的能力来说，对于这些转化是不支持的。那怎么办呢？给webpack扩展对应的loader就可以啦。
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置
大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。
7.1CSS loader项目开发过程中，我们必然需要添加很多的样式，而样式我们往往写到一个单独的文件中。在src目录中，创建一个css文件，其中创建一个normal.css文件。我们也可以重新组织文件的目录结构，将零散的js文件放在一个js文件夹中。normal.css中的代码非常简单，就是将body设置为red但是，这个时候normal.css中的样式会生效吗？当然不会，因为我们压根就没有引用它。webpack也不可能找到它，因为我们只有一个入口，webpack会从入口开始查找其他依赖的文件。
normal.css
body { background-color: red; }在main.js中引入
//引入CSS文件 require('./css/normal.css')
重新打包，出现如下错误
这个错误告诉我们：加载normal.css文件必须有对应的loader。
这时，我们打开webpack的官网https://www.webpackjs.com/loaders/css-loader/，找到对应的css-loader的配置。loader的配置按照官网的要求来就可以，安装好对应的loader后，我们需要在webpack.config.js中加入相应的配置
const path = require('path'); module.exports = { //入口：可以是字符串、数组、对象 entry: './src/main.js', //出口：通常是一个对象，里面至少包含两个属性，path和filename output: { path: path.resolve(__dirname, 'dist'), //注意 path通常是一个决定路径 filename: 'bundle.js' }, module: { //引入 css配置 rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] } };注意：使用css-loader前必须引入style-loader，不然在页面看不到效果
7.2less loader如果我们希望在项目中使用less、scss、stylus来写样式，webpack是否可以帮助我们处理呢？我们这里以less为例，其他也是一样的。我们还是先创建一个less文件，依然放在css文件夹中
继续在官方中查找，我们会找到less-loader相关的使用说明。首先，还是需要安装对应的loader。注意：我们这里还安装了less，因为webpack会使用less对less文件进行编译。其次，修改对应的配置文件,添加一个rules选项，用于处理.less文件
npm install --save-dev less-loader less
首先，我们在项目中加入两张图片：一张较小的图片test01.jpg(小于8kb)，一张较大的图片test02.jpeg(大于8kb)，待会儿我们会针对这两张图片进行不同的处理
我们先考虑在css样式中引用图片的情况，所以我更改了normal.css中的样式：
如果我们现在直接打包，会出现如下问题
图片处理，我们使用url-loader来处理，依然先安装url-loader
npm install --save-dev url-loader修改webpack-config.js
