diff --git a/build/locale_loader.js b/build/locale_loader.js
new file mode 100644
index 00000000..ab29b225
--- /dev/null
+++ b/build/locale_loader.js
@@ -0,0 +1,22 @@
+const path = require('path');
+
+function getLocaleCode(name, code) {
+  return `${code.replace('export default', 'const message =')}
+if (window && window.x && window.x.spreadsheet) {
+  window.x.spreadsheet.$messages = window.x.spreadsheet.$messages || {};
+  window.x.spreadsheet.$messages['${name}'] = message;
+}
+export default message;
+`;
+}
+
+module.exports = require('babel-loader').custom(babel => {
+  return {
+    result(result, { options }) {
+      // console.log('options:', options);
+      const lang = path.basename(options.filename, '.js');
+      result.code = getLocaleCode(lang, result.code);
+      return result;
+    },
+  };
+});
\ No newline at end of file
diff --git a/build/webpack.config.js b/build/webpack.config.js
new file mode 100644
index 00000000..83f0cd62
--- /dev/null
+++ b/build/webpack.config.js
@@ -0,0 +1,52 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const resolve = dir => path.join(__dirname, '..', dir);
+
+module.exports = {
+  entry: {
+    xspreadsheet: './src/index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          }
+        },
+        include: [resolve('src'), resolve('test')],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'style-loader',
+          'css-loader',
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'less-loader',
+        ],
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        use: [
+          'file-loader',
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          'file-loader',
+        ],
+      },
+    ],
+  },
+};
diff --git a/build/webpack.dev.js b/build/webpack.dev.js
new file mode 100644
index 00000000..38cc1c0f
--- /dev/null
+++ b/build/webpack.dev.js
@@ -0,0 +1,31 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.config.js');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = merge(common, {
+  mode: 'development',
+  plugins: [
+    new CleanWebpackPlugin(['dist']),
+    //  you should know that the HtmlWebpackPlugin by default will generate its own index.html
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      title: 'x-spreadsheet',
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].[contenthash].css',
+      // chunkFilename: devMode ? '[id].[hash].css' : '[id].css',
+    }),
+  ],
+  output: {
+    filename: '[name].[contenthash].js',
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    host: '0.0.0.0',
+    contentBase: '../dist',
+  },
+});
diff --git a/build/webpack.locale.js b/build/webpack.locale.js
new file mode 100644
index 00000000..4b9fc4ed
--- /dev/null
+++ b/build/webpack.locale.js
@@ -0,0 +1,30 @@
+const path = require('path');
+const fs = require('fs');
+
+const localeFiles = fs.readdirSync(path.resolve(__dirname, '../src/locale'));
+const entry = {};
+localeFiles.forEach((file) => {
+  const name = file.split('.')[0];
+  
+  if (name !== 'locale') {
+    entry[name] = `./src/locale/${file}`;
+  }
+});
+
+module.exports = {
+  entry,
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../dist/locale'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: path.resolve(__dirname, 'locale_loader.js'),
+      }
+    ]
+  },
+  plugins: [
+  ],
+};
diff --git a/build/webpack.prod.js b/build/webpack.prod.js
new file mode 100644
index 00000000..05a3568f
--- /dev/null
+++ b/build/webpack.prod.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const common = require('./webpack.config.js');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  plugins: [
+    new CleanWebpackPlugin(['dist']),
+    //  you should know that the HtmlWebpackPlugin by default will generate its own index.html
+    new HtmlWebpackPlugin({
+      template: './index.html',
+      title: 'x-spreadsheet',
+    }),
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      // chunkFilename: devMode ? '[id].[hash].css' : '[id].css',
+    }),
+  ],
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+});