#javascript #css #webpack #сборка
Как собрать разрозненные в проекте стили/скрипты в один файл (bundle.js/bundle.css)с
помощью webpack?
Проект содержит стили и скрипты для каждого приложения, которые лежат в отдельном
каталоге. Папка фронтенда:
├── frontend
│ ├── common
│ ├── node_modules
│ ├── app1
│ ├── app2
│ ├── app3
│ ├── ...
│ └── webpack.config.js
Папка каждого приложения имеет одинаковую структуру, но содержит разное количество
скриптов, стилей, шаблонов, который располагаются на одном уровне:
├── app
│ ├── static
│ │ └── app
│ │ ├── css
│ │ │ └── app.css
│ │ └── js
│ │ ├── app-detail.js
│ │ └── settings.js
│ └── templates
│ └── app
│ ├── app__element-detail.html
│ ├── app.html
│ ├── app__periodic-table.html
│ └── app__settings.html
Как собирать все эти файлы в один?
Применительно к стилям - видел способ с extract-text-webpack-plugin, но во всех примерах
показыват один и тот же сценарий - одна точка входа, стили импортированы в скрипт и
из них уже собирается.
Мне же нужно просто сделать бандл, его подключу в базовом шаблоне.
Аналогичный вопрос можно задать и по сборке всех скриптов, только кроме своих скриптов
в сборку нужно включить скрипты нпм.
Дайте, пожалуйста, советы
Мой конфиг вебпака https://jsfiddle.net/9qkwuru1/.
'use strict';
const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: __dirname,
entry: "./table/static/table/js/settings.js",
output: {
path: __dirname + "/common",
filename: "bundle.js"
},
watch: NODE_ENV == 'development',
watchOptions: {
aggregateTimeout: 100
},
devtool: NODE_ENV == 'development' ? 'source-map' : null,
resolve: {
moduleDirectories: ['node_modules'],
extension: ['', '.js', '.styl']
},
resolveLoader: {
moduleDirectories: ['node_modules'],
moduleTemplates: ['*-loader'],
extension: ['', '.js' ]
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: [
/(node_modules|bower_components)/
],
query: {
presets: ['es2015']
}
}, {
test: /\.jade$/,
loader: 'jade'
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
}, {
test: /\.styl$/,
loader: 'style!css!autoprefixer?browsers=last 2 version!stylus?resolve url'
}, {
test: /\.(png|jpg|svg)/,
loader: 'file?name=[path][name].[ext]'
}]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(NODE_ENV)
}),
new webpack.ProvidePlugin({}),
new ExtractTextPlugin({
filename: "bundle.css"
})
]
};
if (NODE_ENV == 'production') {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
unsafe: true
}
})
)
}
Ответы
Ответ 1
Мне приходилось решать такую задачу в одном из боевых проектов.
Для этого я использовал функцию glob, которая собирает все файлы по маске.
https://www.npmjs.com/package/glob
И обертку для нее, которая позволяет задавать несколько таких масок массивом: https://www.npmjs.com/package/glob-all
Она довольно простая, не смотрите что звезд не очень много.
Ставим этот пакет (сам glob он вытянет зависимостью):
npm install glob-all --save-dev
В вебпак конфиге:
var glob = require("glob-all");
После этого выдаем точкам входа результат, например так:
entry: {
yourAwesomeEntryPoint: glob.sync([
"./someFolder/*.js",
"./anotherFolder/*.js"
]),
Соответственно маски могут задаваться довольно хитро, в том числе регуляркой, подробнее
в документации к пакетам.
В моем случае этого хватило.
