本地开发服务器

安装 webpack-dev-server

1
npm install --save-dev webpack-dev-server

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    ...
    devServer: {
        contentBase: "./",  //告诉服务器在哪里，从提供内容
        port: 9000,         //端口
        inline: true,       //
        compress: false,    //是否启用gzip压缩
        historyApiFallback: false,  //将404定向到固定位置
    }
    ...
};

修改 package.json

1
2
3
4
5
6
7
{
  ...
  "scripts": {
    "dev": "webpack-dev-server",
  },
  ...
}

webpack HotModuleReplacement

1
npm install --save react-hot-loader@next

Create a .babelrc

1
2
3
4
5
6
7
8
9
{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  context: resolve(__dirname, 'src'),

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.js'
    // the entry point of our app
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },

  devtool: 'inline-source-map',

  devServer: {
    hot: true,
    // enable HMR on the server
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [ 'babel-loader', ],
        exclude: /node_modules/
        //注意，这里不能使用 options: {} 应该在项目根目录创建 .babelrc
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader?modules', ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates
  ],
};

src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR

import App from './components/App';

const render = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component/>
    </AppContainer>,
    document.getElementById('root')
  );
};

render(App);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    render(App)
  });
}

webpack 仪表盘

安装 webpack-dashboard

1
npm install webpack-dashboard --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
// Import the plugin:
var DashboardPlugin = require('webpack-dashboard/plugin');

// If you aren't using express, add it to your webpack configs plugins section:
plugins: [
    new DashboardPlugin({ port: 3001 })
]

// If you are using an express based dev server, add it with compiler.apply
compiler.apply(new DashboardPlugin());

HTML代码热加载

webpack-dev-server 只能监控入口文件（JS/LESS/CSS/IMG）的变化，因此 HTML 文件的变化必须依赖插件来进行监控。
安装 html-webpack-plugin

1
npm install html-webpack-plugin --save-dev

修改配置文件 webpack.config.js， 把 index.html 加入监控

1
2
3
4
5
6
7
8
9
10
11
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({   // html代码热加载
            template: './index.html'
        }),
    ],
    ...
};

自动打开浏览器

安装 open-browser-webpack-plugin

1
npm install open-browser-webpack-plugin --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    ...
    plugins: [
        new OpenBrowserPlugin({ //自动打开浏览器
            url: 'http://localhost:9000'
        })
    ],
    ...
};

配置 json 加载器

安装 json-loader

1
npm install json-loader --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
    ...
    module: { 
        rules: [{
            test: /\.json$/,
            use: [
                { loader: "json-loader" },
            ]
        }]
    }
};

创建 config.json 文件，内容如下

1
2
3
4
{
    "name": "demo",
    "type": "HTML5"
}

使用

1
2
3
var config = require('../config.json')

console.log(config.name);

配置 LESS 编译

安装 less style-loader css-loader less-loader

1
npm install less style-loader css-loader less-loader --save-dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
    ...
    module: { 
        rules: [
        {
            test: /\.less$/,
            use: [
                { loader: "less-loader" },
                { loader: "style-loader" },
                {
                    loader: "css-loader",
                    options: {
                        modules: true,
                    }
                }
            ]
        },
    }
};

配置 Babel 编译

安装 babel-core babel-loader babel-preset-es2015

1
npm install babel-core babel-loader babel-preset-es2015 --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    ...
    module: { 
        rules: [{
            test: /\.js$/,   //babel解析器
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    }
};

配置 React

安装 babel-core babel-loader babel-preset-es2015 babel-preset-react

1
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
    ...
    module: { 
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: [
                    path.resolve(__dirname, "/node_modules/")
                ],
                query: {
                    presets: ['es2015','react']
                }
            }
        ]
    }
};

配置 jQuery 解析器

安装 jquery

1
npm install jquery --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({   //jquery解析器
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

配置 js 代码压缩

修改配置文件 webpack.config.js, 在 plugin 中添加 webpack.optimize.UglifyJsPlugin 模块

1
2
3
4
5
6
7
8
9
10
11
12
13
var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

module.exports = {
    ...
    plugins: [
         new uglifyJsPlugin({ //js代码压缩
            compress: {
                warnings: false
            }
        })
    ]
};

配置 eslint 语法解析

安装 esline 库

1
npm install eslint eslint-loader eslint-friendly-formatter eslint-plugin-html babel-eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

在项目根目录下添加 eslint 配置文件 .eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// http://eslint.org/docs/user-guide/configuring
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    "indent": [2, 4],//缩进风格
    'no-undef': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

修改配置文件 webpack.config.js
安装 url-loader

1
npm install url-loader --save-dev

修改配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    ...
    module: { 
        loaders: [{
            test: /\.(png|jpg)$/,
            use: [
                {
                    loader: "url-loader"
                }
            ]
        }]
    }
};

配置图片

1
2
3
4
5
6
7
module.exports = {
    ...
    module: { 
        loaders: [
        ]
    }
};

配置 normalize.css

安装 normalize.css

1
npm install normalize.css --save

使用

1
import 'normalize.css';

配置 iconfont

  • http://www.iconfont.cn/ 选图标，添加到购物车，下载代码。
  • 有三种方式，推荐使用 unicode 方式，将字体文件和 iconfont.css 放到项目中
  • iconfont.css 修改字体路径例如 url('../font/iconfont.woff?t=1494653894295') 形式

  • 修改 webpack.config.js 配置 url-loader 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    module.exports = {
        ...
        module: { 
            loaders: [{
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                use: [
                    {
                        loader: "url-loader"
                    }
                ]
            }]
        }
    };

  • 使用 iconfont

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import React, { Component } from 'react';
    import Font from '../../style/iconfont.css';

    class Banner extends Component{
        render(){
            return (
                <div className={Style.historyButtonBack+" "+Font.iconfont+" "+Font["icon-houtui"]}></div>
            )
        }
    }