webpack@3.0+配置react开发环境

2018-11-20 本文已影响0人 LuckyFBB

项目创建

创建一个文件夹，进入到该目录，执行npm init。所有的提示内容均可以跳过，执行完之后，目录中会多一个package.json文件，该文件为核心文件，包含包依赖管理和脚本任务。

mkdir webpack-demo
cd webpack-demo
npm init

安装react，react-dom,webpack

--save的含义是项目上线运行所需要的包(生产环境)
--save-dev是开发环境所需要的包
npm install react react-dom --save
npm install webpack@3.8.1 --save-dev -g
(配置3.0+的webpack，全局安装webpack)

目录.png

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="bundle.js"></script>
</body>
</html>

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

webpack.config.js

const path = require('path');
module.exports = {
    entry: path.resolve(__dirname, './src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
    output: {
        path: path.resolve(__dirname, './dist'), // 输出的路径
        filename: 'bundle.js'  // 打包后文件
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

执行打包

1. webpack --config webpack.config.js
  执行打包之后会报出如图(缺少依赖.png)错误。
  因为我们使用了react，react是使用jsx语法实现的，而jsx不能直接被浏览器识别和执行，所以这里需要引入Babel库进行转码。
2. npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
3. 再次执行webpack --config webpack.config.js
  会报出如图(版本错误.png)错误，babel-core和babel-loader版本对不上

缺少依赖.png

版本错误.png

简单的优化

1. index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';

  ReactDOM.render((<App />), document.getElementById('app'));
2. 新建.babelrc文件，提取babel配置
  {
    "presets": [
      "es2015",
      "react"
    ]
  }
3. 修改webpack.config.js
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
4. 在src下新建App.js
  import React, { Component } from 'react';

  class App extends Component {
    render() {
      return (
        <div>Hello React!</div>
      );
    }
  }

  export default App;

以脚本的方式构建

修改package.json，加入自定义脚本，在项目根目录执行npm run dev即可达到上面一样的效果。
"scripts": {
  "dev": "webpack --config webpack.config.js"
}

搭建前端服务器

webpack-dev-server是一个小型的静态文件服务器，为webpack打包的资源文件提供Web服务。
1. 在src下面新建文件webpackDevServer.config.js
  'use strict'

  const WebpackDevServer = require('webpack-dev-server');
  const config = require('./webpack.config');
  const webpack = require('webpack');
  const path = require('path');
  const compiler = webpack(config);
  const server = new WebpackDevServer(compiler, {
    contentBase: path.resolve(__dirname, './dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    port: 3000, //如果省略，默认8080
    publicPath: "/"
  });
  server.listen(3000, 'localhost', function (err) {
    if (err) throw err
  })
2. 更新package.json
  "scripts": {
    "dev": "node webpackDevServer.config"
  }

！！！注意webpack-dev-server的版本问题，不然会报出如下错误。

webpack-dev-server版本问题.png

到此已经使用webpack搭建好简单的React开发环境。🏃🏃🏃

webpack@3.0+配置react开发环境

猜你喜欢

热点阅读