配置webpack+react环境

发布时间：2020-12-15 07:23:22 所属栏目：百科来源：网络整理

导读：假设node环境已经装好当前目录创建package.json文件： { "name": "react-demo","version": "1.0.0","description": "a test","main": "bundle.js","scripts": { "test": "echo "Error: no test specified" exit 1" },"author": "xxx","license": "MIT","d

假设node环境已经装好

当前目录创建package.json文件：

{
  "name": "react-demo","version": "1.0.0","description": "a test","main": "bundle.js","scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },"author": "xxx","license": "MIT","devDependencies": {
    "babel-core": "^6.24.1","babel-loader": "^7.0.0","babel-preset-es2015": "^6.24.1","css-loader": "^0.28.0","style-loader": "^0.16.1","webpack": "^2.4.1"
  },"dependencies": {
    "babel-preset-react": "^6.24.1","react": "^15.5.4","react-dom": "^15.5.4"
  }
}

然后当前目录执行：

npm install

安装成功后在当前目录执行创建并编辑文件webpack.config.js：

var path = require('path')

module.exports = {
  entry: './entry.js',output: {
    path:path.join(__dirname,'/dist'),filename: 'bundle.js'
  },resolve: {
        extensions: ['.js','.jsx']
    },module: {
    loaders: [
      {test: /.css$/,loader: 'style-loader!css-loader'},{
        test: /.js?$/,//表示要编译的文件的类型，这里要编译的是js文件
        loader: 'babel-loader',//装载的哪些模块
        exclude: /node_modules/,//标示不编译node_modules文件夹下面的内容
        query: {//具体的编译的类型，
            compact: true,//表示不压缩
            presets: ['es2015','react']//我们需要编译的是es6和react
        }
      }
    ]
  }
}

创建编辑入口文件entry.js:

import React from 'react';
import { render } from 'react-dom';
var myDivElement = <div className="foo" />;
render(myDivElement,document.getElementById('mountNode'));

创建编辑index.html:

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<div id="mountNode"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

执行命令webpack成功！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!