Как реализовать туннель в WebPack наподобии Gulp?

Question

[vaskadogana]

Чтобы с телефона можно было смотреть результаты работы.
Если в галп, поставил плагин, скопипастил конфиг всё завелось

var config = {
    server: {
        baseDir: project_name + "build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "vaska"
};

gulp.task('webserver', function () {
    browserSync(config);
});

то в вебпак норм инструкции не нашел.
конфиг для dev

const webpack = require('webpack')
const path = require('path')
const merge = require('webpack-merge')

module.exports = merge(require('./webpack.config'), {
  devtool: 'source-map',

  devServer: {
    compress: false,
    port: 9000,
    contentBase: path.resolve(__dirname, '../src')
  }
})

конфиг зависимостей

const path = require('path')
const webpack = require('webpack')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const autoprefixer = require('autoprefixer');

module.exports = {
  context: path.join(__dirname, '../src'),

  entry: {
    app: './entry.jsx'
  },

  output: {
    filename: '[name]-bundle.js',
    chunkFilename: '[name]-[hash].chunk.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader", // compiles Sass to CSS
               
         }]
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader?limit=100000' 
      },
    ],
    
  },
  
  resolve: {
    extensions: ['.js', '.jsx', '.scss', '.css'],
    modules: [
      path.join(__dirname, '../src'),
      'node_modules'
    ],
  },
 
  
  plugins: [
    new LodashModuleReplacementPlugin({
      'collections': true,
      'shorthands': true,
    }),

    new HtmlWebpackPlugin({
      template: 'index.template.html'
    }),
    new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [
            autoprefixer(),
          ]
         }
      }),
    // new webpack.IgnorePlugin(/cptable/),//was need for fix bug with this library
    
  ],
  node: {
        fs: "empty"
  },
  externals: [
        {  "./cptable": "var cptable",  "./jszip": "jszip" }
  ],
}

p.s. или не то гуглю

Comments

[Иван]

Товарищ,а по каким вы материалам изучали вебпак? Самому надо тоже изучить)

[vaskadogana]

Иван, честно говоря толком не изучал, с гулпом разбирался, тут по аналогии методом тыка ну и конечно google, habr

Answer 1

[vaskadogana]

нужно было host в настройках

const webpack = require('webpack')
const path = require('path')
const merge = require('webpack-merge')

module.exports = merge(require('./webpack.config'), {
  devtool: 'source-map',

  devServer: {
    compress: false,
    host: ''192.168.01.01',',//your ip adress"
    port: 9000,
    contentBase: path.resolve(__dirname, '../src')
  }
})

Comments

[vaskadogana]

p.s. фаервол может блокировать доступ