设置webpack+react环境

2024年5月24日 209次阅读 来源: 写乐

假定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
胜利！

    原文作者：写乐
    原文地址: https://segmentfault.com/a/1190000009156072
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞