Вот обновленный package.json для установки веб-пакета, загрузчиков и других зависимостей. Этот файл также определяет scripts для запуска и run команд.

package.json

{
  "name": "gmap-webpack",
  "version": "0.0.1",
  "description": "location inputs populated by google maps api, built with webpack",
  "main": "",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --progress --inline --open",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.2.3",
    "css-loader": "^0.25.0",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Команда npm start использует подключаемый модуль cross-env для правильной установки переменной среды Node для платформы. Затем webpack-dev-server объединяет модули и запускает встроенный статический веб-сервер для перезагрузки в реальном времени.

Команда npm run build использует cross-env для установки флага среды. Затем webpack объединяет модули в соответствии с приведенным ниже webpack.config, оптимизированным с исходной картой для производства.

webpack.config

const path = require('path')
const webpack = require('webpack')
module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './js/index.js',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    devtool: '#eval-source-map',
    module: {
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: ['style-loader','css-loader']
        }]
    }
}
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({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

В файле webpack.config свойство output.publicPath используется webpack-dev-server для определения того, откуда должны обслуживаться пакеты.

Свойство devtool определяет, генерируются ли исходные карты и как. eval-source-map предназначен для более быстрой перестройки при разработке. В рабочем режиме devtool вместо этого использует соответствующий стиль source-map.

Чтобы протестировать приложение и поэкспериментировать с сервером разработки и перезагрузкой в ​​реальном времени, выполните следующие действия, предполагая, что у вас установлен Node.js.

  1. Загрузите и извлеките исходный код или используйте git для клонирования репозитория uiCookbook с https://github.com/jimfrenette/uiCookbook.
  2. Перейдите в папку uiCookbook/geocode/gmap-webpack в вашем CLI, таком как терминал или Cygwin.
  3. Выполнить npm i или npm install
  4. Запустите npm start, чтобы запустить сервер разработки, связать модули и загрузить приложение в браузере.

Исходный код

Версия приложения Google Maps Vue.js доступна в каталоге geocode/gmap-vue. Для создания шаблона проекта Vue.js 2 использовался скаффолд vue-cli webpack-simple.

Исходный пост доступен на JimFrenette.com