以index.js文件为入口文件进行配置 3.开启webpack-dev-server服务，并在次服务器环境下完成后续实验 3.在index.js中引入tempalte.handlebars文件 4.在index.js中引入style.css

好的，这是一个关于webpack的实验问题。根据你的要求，我可以给出以下的步骤：

1.首先，需要安装webpack和webpack-cli，可以使用以下命令进行安装：

npm install webpack webpack-cli --save-dev

2.在项目根目录下创建一个webpack.config.js文件，并进行基本配置：

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

其中，entry表示入口文件，output表示输出文件的路径和文件名。

3.安装webpack-dev-server并在此服务器环境下进行实验：

npm install webpack-dev-server --save-dev

// package.json中添加以下命令
"scripts": {
  "start": "webpack-dev-server --open"
}

执行`npm run start`命令，即可开启webpack-dev-server服务并在此服务器环境下进行实验。

4.在index.js中引入tempalte.handlebars文件：

import template from './template.handlebars';

const data = { message: 'Hello, world!' };
const html = template(data);

document.querySelector('#root').innerHTML = html;

这里使用了ES6的模块化语法，并使用了handlebars模板引擎。

5.在index.js中引入style.css：

import './style.css';

document.querySelector('#root').classList.add('root');

这里使用了CSS模块化，需要在webpack.config.js中进行配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
};

以上就是根据你的要求给出的关于webpack的实验步骤，希望能对你有所帮助。