常用的Webpack配置

官方文档：

http://webpack.github.io/docs/

1. 安装python
2. 安装node.js msi
3. npm自动打包在最新的node.js安装包里

被封的包用国内镜像下载

// 全局安装webpack
npm install webpack -g

常规项目把依赖写入package.json包中去
// 进入项目
cd myproject
// 初始化npm，生成package.json
npm init
// 写入package.json关于webpack的依赖
npm install webpack --save-dev

在项目目录新建webpack.config.js文件，并且写入：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
 
module.exports = {
    // 插件项
    plugins: [commonsPlugin],
    // 页面入口文件配置
    entry: {
        index: './src/js/page/index.js',
        component: './src/js/page/component.js'
    },
    // 入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        // 加载器配置
        loaders: [
            // .css文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            // .js文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            // .scss文件使用style-loader、css-loader和sass-loader来编译处理
            // loader可以省略不写，多个loader之间用!连接
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
            // 图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            // url-loader将样式中引用到的图片转为模块来处理，使用该加载器需要先进性安装：
            // npm install url-loader --save-dev
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
        ]
    },
    // 其他解决方案配置
    resolve: {
        // 从这里查找module
        root: 'E:/myproject/node_modules', // 绝对路径
        // 自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        // 模块别名定义，方便后续直接引用别名，无须多谢长长的地址
        alias: {
            AppStore: 'js/stores/AppStores.js', // 后续直接 require('AppStore') 即可
            ActionType: 'js/actions/ActionType.js',
            AppAction: 'js/actions/AppAction.js'
        }
    }
};

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式
（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。

// 执行webpack.config.js文件
webpack
// 压缩混淆脚本，这个非常非常重要！
webpack - p

// 安装vue框架
npm install vue --save-dev

我的webpack与vue打包实例github地址：
https://github.com/liuqiuchen/myWebpack

添加vue加载器时：

/**
 * Created by user on 2016/11/17.
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
// 命令行下载关于vue加载器的模块：
// npm install extract-text-webpack-plugin --save-dev
var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
module.exports = {
    // 插件项
    /**
     * 使用webpack的DefinePlugin来指定生产环境，以便在压缩时可以让UglifyJS自动删除代码块内的警告语句
     */
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    // 页面入口文件配置
    entry: {
        index: './src/js/page/index.js',
        component: './src/js/page/component.js'
    },
    // 入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        // 加载器配置
        loaders: [
            // .css文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            // .js文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            // .scss文件使用style-loader、css-loader和sass-loader来编译处理
            // loader可以省略不写，多个loader之间用!连接
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
            // 图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            // url-loader将样式中引用到的图片转为模块来处理，使用该加载器需要先进性安装：
            // npm install url-loader --save-dev
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.vue$/, loader: 'vue' }
        ]
    },
    vue: {
       // ... other vue options
        loaders: {
            js: 'coffee',
            html: 'raw'
        }
    },
    // 其他解决方案配置
    resolve: {
        // 从这里查找module
        root: 'E:/myproject/node_modules', // 绝对路径
        // 自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        // 模块别名定义，方便后续直接引用别名，无须多谢长长的地址
        alias: {
            AppStore: 'js/stores/AppStores.js', // 后续直接 require('AppStore') 即可
            ActionType: 'js/actions/ActionType.js',
            AppAction: 'js/actions/AppAction.js'
        }
    }
};