Подготовка окружения 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']
  }
};
 
самая простая команда "webpack" - так и вводить в консоль, а вообще должен быть еще файл package.json - и там должен быть раздел с названием ключа "scripts", и вот среди этих скриптов и есть команды для сборки. Скорее всего что-то похожее на "build" - нужно запускать так: "npm run build". Для запуска команд конечно же нужно установить Node, просто скачать с оф сайта и установить. Также полезная штука для win пользователей - git-bash, такой себе терминал на винде.
 
Все так: сначала ставим себе nodejs и npm. Потом нужно в папке с проектом выполнить команду "npm install" - она установит все зависимости и модули для webpack. Установить глобально вебпак - "npm install -g webpack". После этого можно запускать сборку командой "webpack". Шаг с установкой вебпака можно пропустить если в package.json есть есть команда для сборки.
 
я запускаю сборку командой "npm run dev"
 
всё просто.
устанавилваете 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 указывает на относительный путь до конфигу.

все должно заработать как часы.
 
Мне необходимо было готовая сборка пакетов. Все это дело необходимо для prestashop. Решил путем:
package.json c github разработчика (prestashop)
 
webpack --progress --colors --watch --config путь/до/конфига/от/корня/webpack.config.js
ключ --progress даст вам возможность следить за процессом сборки
--colors - просто для визуального удобства
 
Назад
Сверху