Подготовка окружения WebPack

Dmitry_zharov

Создатель
Регистрация
10 Фев 2017
Сообщения
37
Реакции
21
Добрый день! Т.к совсем не знаю webpack и Node.js, прошу вашей помощи в подготовки окружения для готового проекта.

Есть шаблон для Prestashop, хочу стили некоторых элементов. В структуре есть конфиг вебпака (Webpack.config.js). Я так понял, на нем и был скомпилирован css файл.

Подскажите, пожалуйста, какие команды вводить в консоль настройки компиляции(работаю в webstorm). Ниже сам конфиг:
Код:
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var plugins = [];

var production = false;

if (production) {
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  );
}

plugins.push(
  new ExtractTextPlugin(
    path.join(
      '..', 'css', 'theme.css'
    )
  )
);

module.exports = {
  entry: [
    './js/theme.js'
  ],
  output: {
    path: '../assets/js',
    filename: 'theme.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader']
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract(
        "style",
        "css?sourceMap!postcss!sass?sourceMap"
      )
    }, {
      test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
      loader: 'file-loader?name=../css/[hash].[ext]'
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader!postcss-loader"
    }]
  },
  postcss: function() {
    return [require('postcss-flexibility')];
  },
  externals: {
    prestashop: 'prestashop'
  },
  devtool: 'source-map',
  plugins: plugins,
  resolve: {
    extensions: ['', '.js', '.scss']
  }
};
 

Alabama

Создатель
Регистрация
30 Июн 2014
Сообщения
34
Реакции
5
самая простая команда "webpack" - так и вводить в консоль, а вообще должен быть еще файл package.json - и там должен быть раздел с названием ключа "scripts", и вот среди этих скриптов и есть команды для сборки. Скорее всего что-то похожее на "build" - нужно запускать так: "npm run build". Для запуска команд конечно же нужно установить Node, просто скачать с оф сайта и установить. Также полезная штука для win пользователей - git-bash, такой себе терминал на винде.
 

lexaz44

Создатель
Регистрация
21 Мар 2017
Сообщения
10
Реакции
0
Все так: сначала ставим себе nodejs и npm. Потом нужно в папке с проектом выполнить команду "npm install" - она установит все зависимости и модули для webpack. Установить глобально вебпак - "npm install -g webpack". После этого можно запускать сборку командой "webpack". Шаг с установкой вебпака можно пропустить если в package.json есть есть команда для сборки.
 

r_219

Постоялец
Регистрация
20 Мар 2015
Сообщения
139
Реакции
40
я запускаю сборку командой "npm run dev"
 

burn1ng

Создатель
Регистрация
15 Мар 2016
Сообщения
10
Реакции
1
всё просто.
устанавилваете NodeJS (lts версию) Для просмотра ссылки Войди или Зарегистрируйся
устанавливаете более менее нормальную консоль Для просмотра ссылки Войди или Зарегистрируйся
правой кнопкой мыши в проекте тыкаете - Run Git bush
запустится ваш свежеустановленный терминал.
пишите туда npm install && npm install --dev-only
это последовательно сначала установит все пакеты и зависимости проекта (естественно скачает из интернета).
команда после && - установит только пакеты, указанные в devDependencies - в файле package.json вашего проекта.

поставьте глобально webpack.
в той же консоли после завершения всех операций - npm install -g webpack
после установки - скармливайте ваш конфиг самому вебпаку командой в консоли:

webpack --progress --colors --watch --config путь/до/конфига/от/корня/webpack.config.js
ключ --progress даст вам возможность следить за процессом сборки
--colors - просто для визуального удобства
--watch - включит watcher за вашими файлами, т.е. при изменении любых исходников - сборка будет перезапущена автоматически - а именно конкретные ваши изменения вставяться в нужную секцию в конечном бандле (выходном файле webpack).
--config указывает на относительный путь до конфигу.

все должно заработать как часы.
 

Dmitry_zharov

Создатель
Регистрация
10 Фев 2017
Сообщения
37
Реакции
21
Мне необходимо было готовая сборка пакетов. Все это дело необходимо для prestashop. Решил путем:
package.json c github разработчика (prestashop)
 

dxpedillv

Писатель
Регистрация
24 Сен 2017
Сообщения
1
Реакции
0
webpack --progress --colors --watch --config путь/до/конфига/от/корня/webpack.config.js
ключ --progress даст вам возможность следить за процессом сборки
--colors - просто для визуального удобства
 
Сверху