1.webpack基础配置与loader的基础应用

写在开头

该系列文章主要是本人在学习慕课网React全栈课程中的一些记录和分享。该课程主要是利用React构建cnode网站，接口由cnode官方提供。由于课程中的webpack，babel版本较老，本次分享均是用的webpack4和Babel7。本系列文章重点不是React，主要是分享前端工程化的构建和服务端渲染（SSR）。

本次分享的代码将会放到我的github上面。

工程初始化和webpack基础配置

新建项目文件夹，在cmd窗口中运行npm init,输入一些配置项后即可生成一个npm项目。运行git init,对该项目进行git版本管理。在项目中新建build和client文件夹，build文件夹存放webpack配置文件，client文件夹存放客户端的开发文件。

首先安装基础的依赖React和Webpack。

npm i react -S   
npm i webpack -D   // -D为开发依赖
npm i webpack-cli -D  // webpack4，需要安装cli依赖

新建一些文件

• build/webpack.config.js // webpack配置文件
• client/app.js // 项目的入口文件
• client/App.jsx // react入口文件

webpack基础配置，详细配置可参照官网

const path = require('path')  // path包解决不同操作系统中路径不一致问题

function resolvePath(filePath) {
  return path.join(__dirname, filePath);
}

module.exports = {
  mode: 'development', // 开发模式或生产模式
  // 入口文件，webpack编译的入口
  entry: {
    app: resolvePath('../client/app.js')
  },
  // 打包后文件的输出地址
  output: {
    filename: '[name].[hash].js', //name和hash是其中的两个变量
    path: resolvePath('../dist'), // 打包后文件的位置
    publicPath: '' //
  }
}

webpack基本配置完成了，在package.json中的scripts中增加一个build命令

"scripts": {
    "build": "webpack --config build/webpack.config.js"
  },

在app.js中随便写一点内容，在cmd中运行npm run build,在当前文件夹下会生成一个dist目录，该目录下即为经webpack编译后的文件。该部分代码位于仓库的2-3分支下

如果初始化git后，在项目下添加 .gitignore 文件，用来配置不需要版本管理的文件夹或文件，如node_modules等

babel-loader及babel的配置

由于在项目中用到ES6和jsx语法，所有需要用babel先编译。babel-loader也是react官方的编译器。我们现在app和App文件中写一些简单的内容。

App.jsx
    import React from 'react'
    // 一个简单的react组件
    export default class App extends React.Component {
      render() {
        return (
          <div>This is app</div>
        )
      }
    }
app.js
    //将App.jsx中的组件挂载到body上（仅作演示，不建议挂载到body上）
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    import App from './App'
    
    ReactDOM.render(<App />, document.body)

配置webpack中的loader，loader主要是转换代码的作用，如将jsx代码转为js代码。我们需要安装babel-loader，@babel/core和@babel/preset-react三个依赖，均用-D安装。

resolve: {
    extensions: ['.js','.jsx']  // 默认文件后缀。在app.js中，直接引入App，而不是App.jsx。所有的js和jsx文件在引入时均可省略后缀
  },
  // 配置loader
  module: {
    rules: [
      {
        test: /.jsx$/,  // 正则，处理以.jsx结尾的文件
        loader: 'babel-loader'  // 使用的loader
      },
      {
        test: /js$/, // 主要是将ES6或更高级别的无法转为ES5版本
        loader: 'babel-loader',
        exclude: [
          resolvePath('../node_modules') // 忽略node_modules中的文件
        ]
      }
    ]
  },

配置完webpack后，babel还没有生效。需要在项目中新建一个.babelrc文件，配置项如下。

// babel7的配置比较简洁，直接使用官方的preset-react即可。
{
  "presets": ["@babel/preset-react"]
}

运行npm run build命令，新生成的js文件就会包含react相关的代码了。

目前生成的文件均为js文件，并没有html文件的生成。我们之需要安装html-webpack-plugin，然后再webpack中配置即可

const HTMLPlugin = require('html-webpack-plugin')

modeule.exports = {
    //.........
   plugins: [
    new HTMLPlugin()
  ]
}

再次运行build命令后，会再dist目录下生成一个index.html文件，打开即可看见我们再App.jsx中的内容。该部分代码位于仓库的2-4分支下