webpack打包（三）--使用loader

接上一篇webpack打包（二）--使用插件

1.在src目录下新建一个index.html文件，添加一个标签<div id="root"></div>

2.webpack.config中的new HtmlWebpackPlugin()改成

new HtmlWebpackPlugin({
        filename:"index.html",
        template:"./src/index.html"
    })

以src文件夹里面的index.html为模板基础创建一个index.html文件。

loader是什么

loader是专门用来处理模块内容的

安装react模块

1.npm i -S react react-dom 安装react模块

代码

app.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <div>React</div>,
    document.getElementById("root")
);

安装相应的loader

npm i -D babel-loader babel-core
npm i -D babel-preset-react

loader配置

由于react使用的是jsx语法，并不能在浏览器中直接运行，这时候就需要先把jsx代码转换为浏览器能够解析的js代码，babel-loader能够帮我们完成这件事情

在webpackconfig中增加配置项

module:{
  rules:[{
      test:/\.js$/,
      use:[{
          loader:"babel-loader",
          options:{
              presets:["react"]
          }
      }]
  }]
}

1.rules接收一个数组对象，也就是说可以配置各种各样的loader
2.test是一个匹配规则，告诉loader处理哪里文件，这里是以.js结尾的文件
3.use匹配到相应的文件后，使用什么loader,做什么处理
4.loader使用babel-loader,可以编译jsx代码
5.presets预设，接受一个数组，因为babel-loader不仅可以处理jsx代码，也可以处理ES6代码,所以要告诉loader处理的是什么，这里是react,全称是babel-preset-react，前面已经安装了babel-preset-react

打包

npm run dev

关于npm的几个问题

1.npm i -S 模块等于npm install 模块 --save,i = install, -S = --save
2.npm i -D 模块等于npm install 模块 --save-dev ，-D = --save-dev
3.--save 将安装包信息加入到dependencies生产阶段的依赖
4.--save-dev安装包信息将加入到devDependencies开发阶段的依赖
5.devDependencies里面的只用于开发环境，不用于生产环境，而dependencies是需要发布到生产环境的,比如一些开发的测试，就可以加入到devDependencies中

使用css-loader

npm i -D css-loader style-loader

webpack.config配置

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
}

css-loader负责把css样式打包，style-loader负责把样式插入到DOM里面

新建样式文件

在src文件夹里新建main.css

body{background:red;}

引用打包

在app.js中

import "./main.css"

npm run dev