webpack 实现自动刷新，复制文件，实现开发环境和发布环境

webpack例子：https://github.com/Aquarius1993/webpackDemo

安装： webpack , webpack-dev-server

1.如何在使用webpack-dev-server的过程中,同时生成文件?

     暂时没有解决，说是解决不了

2.怎样实现baseUrl的开发环境和发布环境的动态改变？

     在package.json中：

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --inline"
  },

　　

     在webpack.config.js中：

 

              if (TARGET === 'start') {
    module.exports.plugins = [
        new webpack.DefinePlugin({
            'env': {
                api: '"http://localhost:8888/v1/"'         测试环境
            }
        }),
        new TransferWebpackPlugin([
            { from: 'exter' }
        ], path.resolve(__dirname, "src")),
        new TransferWebpackPlugin([
            { from: 'login' }
        ], path.resolve(__dirname, "src"))
    ]
    module.exports.devtool = '#source-map'
 
} else {
    module.exports.plugins = [
        new webpack.DefinePlugin({
            'env': {
                api: '"http://localhost:8888/v1/"'      发布环境
            }
        }),
        new TransferWebpackPlugin([             文件拷贝
            { from: 'exter' }
        ], path.resolve(__dirname, "src")),
        new TransferWebpackPlugin([
            { from: 'login' }
        ], path.resolve(__dirname, "src"))
    ]
    module.exports.devtool = '#source-map'
}

　　 

3.怎么实现文件拷贝？

     见上 

 4.实现自动刷新

devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true
    }

5.完整的webpack.config.js

/*
 * @Author: liheyao
 * @Date:   2016-06-21 10:56:42
 * @Last Modified by:   liheyao
 * @Last Modified time: 2016-07-05 11:15:32
 */

'use strict';
// nodejs中的path对象   用于处理目录的对象，提高开发效率
var path = require('path');
var webpack = require("webpack");
var TARGET = process.env.npm_lifecycle_event;
var TransferWebpackPlugin = require('transfer-webpack-plugin');
module.exports = {
    // 入口文件
    entry: ['./src/main'],
    // 输出
    output: {
        // 文件地址，使用绝对路径形式
        path: path.join(__dirname, 'dist'),
        // [name]这里是webpack提供的根据路口文件自动生成的名字
        filename: '[name].js',
        // 公共文件生成的地址
        publicPath: 'dist'
    },
    // 服务器配置相关  自动刷新
    devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true
    },
    // 加载器
    module: {
        loaders: [
            // 解析.vue文件,
            {
                test: /.vue$/,
                loader: 'vue'
            },
            // 转化ES6语法
            {
                test: /.js/,
                loader: 'babel',
                exclude: /node_modules/
            },
            // 编译css并自动添加css前缀
            {
                test: /.css$/,
                loader: 'style!css!autoprefixer'
            },
            // .scss文件编译
            {
                test: /.scss$/,
                loader: 'style!css!sass?sourcsMap'
            },
            // 图片转化
            {
                test: /.(png|jsp|gif)$/,
                loader: 'url-loader?limit=8192'
            },
            // html模板编译
            {
                test: /.(html|tpl)$/,
                loader: 'html-loader'
            },
            //字体
            {
                test: /.(woff|svg|eot|ttf|woff2)$/,
                loader: 'url-loader?limit=50000'
            }

        ]
    },
    // .vue 的配置
    vue: {
        loaders: {
            css: 'style!css!autoprefixer'
        }
    },
    // 转化为es5的语法
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
    },
    resolve: {
        // require时省略的扩展名，如：require('module') 不需要module.js
        extensions: ['', '.js', '.vue'],
        // 别名   可以直接用别名来代表设定的路径以及其他
        alias: {
            filter: path.join(__dirname, './src/filters'),
            components: path.join(__dirname, './src/components')
        }
    },
    plugins: [],
        // 开启source-map，webpack有多种source-map，在官网文档可以查到
     devtool: 'eval-source-map'
};

module.exports.plugins = [
    new webpack.DefinePlugin({
        'env': {
            api: '"/v1/"'
        }
    }),
    new TransferWebpackPlugin([
        { from: 'exter' }
    ], path.resolve(__dirname, "src")),
    new TransferWebpackPlugin([
        { from: 'login' }
    ], path.resolve(__dirname, "src")),
    new TransferWebpackPlugin([
        { from: 'html' }
    ], path.resolve(__dirname, "src"))
]
module.exports.devtool = '#source-map'