Webpack安装记录

Webpack的安装还是存在问题，还不熟，先把主要运行代码贴上来做个记录，测试后再发表最新的。

---

1）新建一个webpack实验文件夹 01-13
2）进入到目录中项目初始化(npm init)
3）可以一路回车(entry point:index.js)
4）项目依赖包安装

npm install --save react react-dom babelify babel-preset-react
npm install babel-preset-es2015 --save

5）命名一定要规范
index.html

<div id="example">123</div>

src/js/index.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(<h1>Hello world!</h1>,document.getElementById('example'));

6）1-12/webpack.config.js (注意文件名要写对)

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

7）运行代码

 npm install -g webpack
 npm install -g webpack-dev-server
 npm install webpack-dev-server --save
 npm install webpack --save

8）运行webpack(四条都可以)

webpack
webpack --watch
webpack-dev-server 拷生成的路径
webpack-dev-server --contentbase -src --inline --hot

9） **记录一下，产生的错误

这里提醒的是，没有start这个脚本，同时查询日志文件

根据错误日志文件，我们可以分析出，没有这个start对应的路径，缺少联系，在package.json中我们可以加入

"scripts": {
    "start": "react-scripts start"
  },

像下图这样

相对来说，create-react-app 更为简单，只需三步


npx create-react-app [文件名]
cd [文件名]
npm start
的
如果想要更改路径，可以在对应路径下node_modules\react-scripts\config\paths.js中更改

---

初识React

/public/index.html

<div id="example">测试内容</div>
<script src="./src/bundle.js"></script>

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader/>
        <IndexBody/>
        <ComponentFooter/>
      </div>
    );
  }
}
ReactDOM.render(<Index/>,document.getElementById('example'));

/src/header.js

var React = require('react');

export default class ComponentHeader extends React.Component{
  render() {
    return (
      <header>
        <h1>这是页头</h1>
      </header>
    )
  }
}

/src/body.js

var React = require('react');

export default class IndexBody extends React.Component{
  render() {
    return (
      <div>
        <h1>这是好久不见的内容</h1>
      </div>
    )
  }
}

/src/footer.js

var React = require('react');

export default class ComponentFooter extends React.Component{
  render() {
    return (
      <footer>
        <h1>这是页脚</h1>
      </footer>
    )
  }
}

---

在这里总结一下，我遇到的问题
1）

这是由于，没有在项目路径就运行npm start。
解决方法：

cd [项目名]
npm start

2）


这是因为用create-react-app 需要严格按照其路径模板

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

解决方法:更改路径
3）

这是因为，代码写错了。以下才是正确的

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

4）
这是因为在

import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js'; 

前不能写其他service代码
可以改为

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentFooter from './footer.js';
import ComponentHeader from './header.js';
import IndexBody from './body.js';

5）

很明显如错误提示一样，继承的类有问题。
即React.Component

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader/>
        <IndexBody/>
        <ComponentFooter/>
      </div>
    );
  }
}

---

写在后面，无论多简单的代码，在实践之前都应该跑一跑，切记眼高手低。