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'