webpack 1.x 编译打包问题

Question

问题1
我使用webpack命令打包文件之后 在运行npm run dev, 网页是正常显示的.
但是这时候, 我修改网页内容, 可以看到页面保存后, 浏览器明显的刷新了一下. 但是页面内容并没有改变...

问题2
如果我一开始不运行webpack打包, 我的输出路径是dist, 运行npm run dev是找不到dist的.这个好像是正常.

我其想问的是 我的打包编译好像不正常...怎么搞都不会正常运行...

//引入webpack plugins里面有用到
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 环境变量设置
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 返回HtmlWebpackPlugin插件参数
var getHtmlConfig = function(name, title) {
    return {
        // 模板
        template: './src/view/' + name + '.html',
        // 输出 dist/view/ 名称index.html
        filename: 'view/' + name + '.html',
        // 生成
        title: title,
        inject: true,
        hash: true,
        chunks: ['common', name]
        // favicon: './favicon.ico'
    }
}

// webpack config
var config = {
    // 指定js入口
    entry: {
        'common'               : ['./src/page/common/index.js'],
        'index'                : ['./src/page/index/index.js']
    },
    output: {
        // 生成文件存放目录
        path: __dirname + '/dist/',
        // 判断是否是开发环境
        publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : 'dai.ding.wz.com/dist/',
        filename: 'js/[name].js'
    },
    // 配置别名
    resolve: {
        alias: {
            node_modules: __dirname + '/node_modules',
            util: __dirname + '/src/util',
            page: __dirname + '/src/page',
            image: __dirname + '/src/image',
            service: __dirname + '/src/service'
        }
    },
    module: {
        loaders: [
            // 考虑到兼容 使用webpack自带的js编译 无需神马babel-loader.....
            // css
            // {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            {
                test: /\.(less|css)$/,
                loader: ExtractTextPlugin.extract('style', 'css!less')
            },
            // 图片
            {
                test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/,
                loader: 'url-loader',
                // 注意 这里其实是需要fileloader的
                query: {
                    limit: 8192,
                    name: 'resourse/[name].[ext]'
                }
            },
            {
                test: /\.string$/,
                loader: 'html-loader',
                query: {
                    minimize: true,
                    // 压缩的时候 不要删除引号
                    removeAttributeQuotes: false
                }
            }
        ]
    },
    externals: {
        'jquery': 'window.jQuery'
    },
    plugins: [
        //  默认会把所有入口节点的公共代码提取出来,生成一个common.js
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        }),
        // 把css单独打包到文件里 
        new ExtractTextPlugin("css/[name].css"),
        // html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index', '首页'))
    ]
};

if ('dev' === WEBPACK_ENV) {
    config.entry.common.push('webpack-dev-server/client?http://localhost:8008/');
}

module.exports = config;

Answer 1

网上查了不少资料 确切的说 还是因为对原理了解的不透彻. 不能刷新 首先要看publicpath...
问题出在了判断线上线下环境的问题上, 所以找不到publicpath