Вот обновленный 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.
- Загрузите и извлеките исходный код или используйте git для клонирования репозитория uiCookbook с https://github.com/jimfrenette/uiCookbook.
- Перейдите в папку uiCookbook/geocode/gmap-webpack в вашем CLI, таком как терминал или Cygwin.
- Выполнить
npm i
илиnpm install
- Запустите
npm start
, чтобы запустить сервер разработки, связать модули и загрузить приложение в браузере.
Исходный код
Версия приложения Google Maps Vue.js доступна в каталоге geocode/gmap-vue. Для создания шаблона проекта Vue.js 2 использовался скаффолд vue-cli webpack-simple.