splincodewd
@splincodewd
Developer

Как в webpack указать, чтобы html файлы перемещались в определенные директории?

У меня есть конфиг
'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');

module.exports = {

  context: __dirname + '/build', // точка входа в приложение

  entry: { // точки входа
    core: './js/vendor/core',
    app: './js/app',
  },

  output: { // выходные файлы
    path: __dirname + "/public/js/",
    publicPath: '/public/js/',
    filename: "[name].js",
    library: '[name]'
  },

  watch: NODE_ENV == 'development', // прослушиваем изменения
  watchOptions: {
    aggregateTimeout: 100
  },

  devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null, // дебаг

  plugins: [
    new webpack.NoErrorsPlugin(), // отключение сборки, если возникла ошибка


   new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
   }),

   new webpack.optimize.CommonsChunkPlugin({
    name: 'core'
   }),

    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(NODE_ENV),
      LANG: JSON.stringify('ru')
    })
  ],

  module: {

    loaders: [
      { // используем ES6 to ES5
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel', // 'babel-loader' is also a legal name to reference
        query: {
          presets: ['es2015']
        }
      },
};

if (NODE_ENV != 'development') {

  module.exports.plugins.push( // оптимизация файлов JS
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        unsafe: true
      }
    })

  )

}


и есть условно директива Angular

export default function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'build/template/login.html' 
  }; 
}


Но так как файлы шаблонов (компоненты-html), например, находятся в папке build/
а точка входа приложения папка public, соответственно, он и не находит

Как сделать так, чтобы после изменений в этих html файлах, сборщик сам отправлял в папку public/template все нужные нам файлы?
  • Вопрос задан
  • 576 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Лучше обойтись вообще без файлов:
export default function() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    template: require('build/template/login.html') // Функция вернёт строку, которая будет содержать весь html
  }; 
}

Таким образом
1. Вы избавляетесь от необходимости переносить файлы туда-сюда
2. Angular избавляется от необходимости делать запрос и загружать файл из-за чего приложение работает быстрее.

Ну и нужно html-loader подключить
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы