webpack如何实现自动刷新?

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于亚洲城ca788手机版官网的点点滴滴

运用webpack-dev-server,怎样完成主动革新?

配置如图:

.]

build可以实行
dev不行实行

dev情况下,怎样完成watch?

报错如下:

var path = requirepath;
var webpack = requirewebpack;
var webpackServer = requirewebpack-server;
var ExtractTextPlugin = requireextract-text-webpack-plugin;

module.exports = {
  entry: {
    Index: ./js/index.js
  },
  output: {
    path: path.resolve__dirname, ./dist,
    publicPath: /dist/,
    filename: [name]-[hash].js
  },
  module: {
    loaders: [
      {
         test: /\.css$/,
         loader: style-loader!css-loader
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extractstyle!css!sass?sourceMap!postcss
      },
      {
        test: /\.js$/,
        loader: babel,
        query: {
          presets: [es2015]
        },
        exclude: /node_modules/
      },
      {
        test: /\.png|jpg|gif|svg$/,
        loader: file,
        options: {
          name: [name].[ext]?[hash]
        }
      }
    ]
  },
  devServer: {
    contentBase: ./, // 指定外地文件夹提供给效力器
    colors: true, // 设置为true,使终端输入的文件为黑色
    historyApiFallback: true, // 假如设置为true,统统的跳转将指向index.html
    inline: true, // 设置为true,当源文件改动时会主动革新页面
    hot: true,
    port: 8080 // 设置默许监听端口,假如省略,默以为”8080“
  },
  devtool: eval-source-map,
  postcss: [
    requireautoprefixer
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin,
    new webpack.optimize.OccurenceOrderPlugin,
    new ExtractTextPlugin[name]-[hash].css
  ]
}

if process.env.NODE_ENV === production {
  module.exports.devtool = #source-map
  module.exports.plugins = module.exports.plugins || [].concat[
    new webpack.DefinePlugin{
      process.env: {
        NODE_ENV: "production"
      }
    },
    new webpack.optimize.UglifyJsPlugin{
      compress: {
        warnings: false
      }
    }
  ]
}

找不到localhost,那么我猜有两种可以,一是你hosts文件有缺损,localhost没定义,另一种是端口被占用?但是我不记得我遇到过这种情况,以是不明晰是不是这种错误提示,你尝尝ping localhost看看能不克不及ping通?

奇特了,如今经过sudo npm run dev可实行了没报错,但是没有构建dist目次了,没东西output出来了…

(看完/读完)这篇文章有何感想! 来看看亚洲城ca788手机版官网是怎么评论的吧!

--转载请注明: www.ca788.com#亚洲城ca788手机版官网 » webpack如何实现自动刷新?

发表评论

(必填)