Webpack （记录）

安装 Webpack

npm install webpack --save-dev

运行 Webpack

node_modules/.bin/webpack

项目目录结构

/app/majn.js

/app/component/header.js

/build/bundle.js(自动创建)

/build/index.html

package.json

webpack.config.js

设置Webpack配置文件

'use strict';

var path = require('path');

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports  =  {

     devtool:  'eval-source-map',

     entry:  [

        'webpack-dev-server/client?http://localhost:3000',

        'webpack/hot/only-dev-server',

        'react-hot-loader/patch',

        path.join(__dirname, 'app/final/index.js')

    ],

     output: {

        path: path.join(__dirname, '/dist/'),

        filename: '[name].js',

        publicPath: '/'

    },

     plugins: [

        new HtmlWebpackPlugin({

            template: './app/index.tpl.html',

            inject: 'body',

            filename: './index.html'

        }),

        new webpack.optimize.OccurenceOrderPlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new webpack.NoErrorsPlugin(),

        new webpack.DefinePlugin({

            'process.env.NODE_ENV': JSON.stringify('development')

        })

    ],

    module: {

        resolve:{

            extensions:['','.js','.json']

        },

        loaders: [

            {

                test: /\.js$/,

                exclude: /node_modules/,

                loader: "babel-loader",

                query: {

                        presets:['react','es2015']

                }

            },

            {

                    test: /\.json?$/,

                    loader: 'json'

            },

            {

                    test: /\.css$/,

                    loader: "style!css"

            }, {

                    test: /\.less/,

                    loader: 'style-loader!css-loader!less-loader'

                }

        ]

    }

};

引用模块方式

ES6语法：

import Header from './component/header.js';

CommonJS语法:

var Header = require('./component/header.js')