學習webpack@1.x

參考：

• https://medium.com/@dabit3/be...

• https://segmentfault.com/a/11...

webpack-dev-server:

configuration.output.path: The provided value "./dist" is not an absolute path!

解決：path.join

path: path.join(__dirname, "list」)

安裝版本1的webpack:

npm i webpack@1 webpack-dev-server@1 --save-dev

http://www.cnblogs.com/le0zh/...

安裝eslint:

npm i eslint eslint-loader —save-dev
npm i babel-eslint —save-dev
npm --save-dev install eslint-plugin-react

擴展ESLint規則:

npm --save-dev install eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y
{ 
  parser: "babel-eslint",
  extends: "airbnb",
  rules: { 
    "max-len": [1, 120, 2, { ignoreComments: true }],
    "prop-types": [2] 
  }
}

上線環境中，去除console.log, debug:

https://segmentfault.com/a/11...

npm install --save-dev strip-loader

// webpack-build.config.js配置strip-loader
var WebpackStrip = require('strip-loader');
var devConfig = require('./webpack.config');

devConfig.entry = {
  app: [
        './src/app.js',
        './src/global.js', 
       ]
}

var stripLoader = {
    test: [/\.js$/, /\.es6$/],
    exclude: /node_modules/,
    loader: WebpackStrip.loader('console.log', 'debug')
};

devConfig.module.loaders.push(stripLoader);
module.exports = devConfig;

設置webpack執行的配置文件

webpack --config webpack-build.config.js -p

這個命令執行完以後，bundle.js就按照build中的的配置對代碼進行了一系列合做。

-p 會執行壓縮

說明: webpack --config 用於設置使用哪一個配置文件作操做。

使用React.js:

npm install react react-dom —save

PropTyeps:

https://segmentfault.com/a/11...

eslint Component should be written as a pure function ：

"react/prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents> }]

enabled: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.

ignorePureComponents: optional boolean set to true to ignore components extending from React.PureComponent (default to false).

eslint 'document' is not defined :

http://stackoverflow.com/ques...

Set the environment as browser in your file:

/* eslint-env browser */ 加個註釋
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
 <App />,
 document.getElementById('root'),
);

Add it as a global in the file itself:

/* global document */
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
 <App />,
 document.getElementById('root'),
);

JSX not allowed in files with extension '.js':

https://github.com/yannickcr/...

The set of allowed extensions is configurable. By default '.jsx' is allowed. If you wanted to allow both '.jsx' and '.js', the configuration would be:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead:

In react 15.5, instead of accessing PropTypes from the main React object, install the prop-types package and import them from there:
https://www.npmjs.com/package...

import PropTypes from 'prop-types'; // ES6 
var PropTypes = require('prop-types'); // ES5 with npm

render(): Rendering components directly into document.body is discouraged:

https://github.com/b52/electr...

eactDOM.render(<Main />, document.body);

results in a chromium warning

warning.js:36 Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.

The better solution:

Change the rendering call to

ReactDOM.render(<Main />, document.getElementById('react_container'));

and add the following between the tags of the index.html file:

<div id="react_container"></div>

建立github倉庫：

git init // 初始化本地git倉庫
git remote add origin https://github.com/QETHAN/webpack-demo.git // 關聯到github倉庫

git 出現warning: CRLF will be replaced by LF :

我想這應該是下載一個從windows裏處處的項目時趕上的。前些天發現了這個問題。在git commit時沒法提交，提示warning: LF will be replaced by CRLF…..。

相關的問題在 stackoverflow上也有說起。產生這個問題的緣由是，windows、Linux和Mac在處理文件換行時的標示符是不一致的。windows使用CRLF做爲結束符，而Linux和Mac使用LF做爲結束符。

同時呢，Git 有兩種模式來對待換行符，你能夠經過下面這行代碼查看你的git配置。

$ git config core.autocrlf

若是顯示爲true，則每一次當你git commit時，若是存在文本文件，那麼git會自動幫你將末尾的換行符改成CRLF，省去了煩心的轉換工做。

若是顯示爲false，則git不會對換行符進行修改，保持本來的內容。

因此呢，做爲Linux和Mac開發者，這個配置應當爲false，而windows開發者，則應當設置爲true。

$ git config --global core.autocrlf  false

引用資料：

http://stackoverflow.com/ques...