react-webpack简单配置

 2018/02/07   Share

首先我们先简单的构建一下项目的目录名字就叫webpack 文件夹，然后我们进到这个文件夹，然后在这里面我们要构建一个从零开始的一个项目结构的目录首先我们现在这个文件夹下面执行一个命令，就是yarn,这个东西和npm差不多，听说你下载的速度比npm快，但是我也没怎么发现，这个东西是facebook推出的，那我来执行这段命令

$ npm i -g yarn

然后安装完之后会有一段提示，说不让你这么安装，说当前的环境有问题，因为是通过npm装的它，如果node出了问题，这个东西就不能用了，但是这个东西没什么问题，我也去查了，证明了这件事，然后我们初始化我们的文件夹，之前是npm init -y,这个也跟它差不多

$ yarn init -y

这时我们的目录会多一个叫package.json的文件

然后我们在根目录创建一个src文件夹，在这个文件夹里创建一个index.js，这个文件是我们的入口文件，然后我们回到根目录来安装我们的webpack

$ yarn add webpack —dev

—dev这个是开发的依赖

然后我们在全局装一下webpack

$ npm i -g webpack

然后我们在根目录创建一个webpack的配置文件叫webpack.config.js,这里面是webpack的主要配置文件,现在我们的目录结构是这样的

Alt text

然后我们开始配置webpack.config.js

// webpack.config.js   第一步
const path = require('path') // 引入path
module.exports = {
  // 入口文件
  entry:'./src/index.js',
  // 出口  里面有两个东西 一个是path路径  一个是filename 
  output:{
    path:path.join(__dirname,'dist'),
    filename:'build.js'
  }
}

在终端执行

$ webpack

这时我们根目录会生成一个dist文件，里面有一个build.js，这里面是webpack帮你生成的一些内容，这是webpack本身的一些函数，里面的每一行大家都应该知道是什么意思，在这里就不去讲了，现在我们编译的过程已经搞定了，然后我们进入src里面的index.js，这里面我们写一下我们React.js的代码

1
2
3

import React from 'react';
import ReactDOM from 'react-dom';
render(<h1>React Hello</h1>,document.getElementById('root'))

然后执行webpack

webpack

会有报错

ERROR in ./src/index.js
Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import ReactDOM from 'react-dom';
| render(<h1>React Hello</h1>,document.getElementById('root'))

这时候我们还没有react,和react-dom,它不认识jsx语法然后安装

$ yarn add react react-dom

1
2
3

import React from 'react';
import ReactDOM from 'react-dom';
render() //里面先不放

在执行webpack

先在还不识别jsx语法

我们少了一些东西就是babel

1
2
3

>$ yarn add @babel/preset-react @babel/preset-env @babel/core babel-loader@8.0.0-beta.0 	 --dev
>
>

创建.babelrc 文件，加入如下代码:

1
2
3

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

这里是babel的配置这是一个转译的过程，让浏览器能认识

然后我们新建一个index.html文件看看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/build.js"></script>
</body>
</html>

Alt text

这个我们的文字就出来了，但是我们是手动引入的<script src="./dist/build.js"></script>这个文件，我们需要让它自动引入，那我们就得在webpack.config.js里面再配置些东西

先下载一个插件,这个插件是自动导入生成的文件

$ yarn add html-webpack-plugin –dev

现在看看我们的配置文件是什么样子


const path = require('path') // 引入path
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 入口文件
  entry:'./src/index.js',
  // 出口  里面有两个东西 一个是path路径  一个是filename 
  output:{
    path:path.join(__dirname,'dist'),
    filename:'build.js'
  },
  module:{ 
    // loaders 这是一个数组类型，数组中包含对象，你可以放很多对象，分别来处理各种任务
    loaders:[
      {
        test:/\.js$/, // 用来匹配所有的js文件，这里面写的是一个正则
        loader:'babel-loader',
        exclude:/node_modules/ // 排除 就是除了node_modules 之外
      }
    ]    
  },
  plugins:[  // 这个插件是直接把生成的文件直接引用进去，自动引入js 是一个数组类型
      // 默认情况下是有参数的
     new  HTMLWebpackPlugin({
        // 模版
        template:'./index.html',
        filename:'index.html',
        title:'首页',
        inject:'body'
     })
  ]
}

配置完之后我们把之前引入的<script src="./dist/build.js"></script>删除调，在执行命令

$ Webpack

这时我们的dist文件里就有个index.html文件了

最后一步就是相当于我们启动一个服务，首先先执行一下命令，这个命令能让我们更方便的执行

$ yarn add webpack-dev-server —dev

然后在我们的package.json,下加一段话

{
  "name": "webpack_text",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {// 加的就是这段话
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.39",
    "@babel/preset-env": "^7.0.0-beta.39",
    "@babel/preset-react": "^7.0.0-beta.39",
    "babel-loader": "8.0.0-beta.0",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

然后我们运行命令

$ yarn start

执行完之后，它会告诉我们，我们的项目现在已经运行在http://localhost:8080/，然后我们就直接输入地址http://localhost:8080/，就行了，自动的你对文件进行修改它就会发生变化，实时更新，是不是很好

CATALOG

