How to collect separate styles / scripts in a project into one file (bundle.js / bundle.css) using a webpack?

The project contains styles and scripts for each application, which lie in a separate directory. Frontend folder:

├── frontend │  ├── common │  ├── node_modules │  ├── app1 │  ├── app2 │  ├── app3 │  ├── ... │  └── webpack.config.js

Each application folder has the same structure, but contains a different number of scripts, styles, templates, which are located on the same level:

 ├── 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

How to collect all these files in one?

With reference to styles, I saw a method with an extract-text-webpack-plugin , but in all examples the same script is shown - one entry point, the styles are imported into the script and are already being assembled from them.

I just need to make a bundle, I'll plug it in the base template.

A similar question can be asked about the assembly of all scripts, except for your own scripts, you need to include npm scripts in the assembly.

Please give advice

My webcam config 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 answer 1

    I had to solve this problem in one of the combat projects.

    For this, I used the glob function, which collects all the files by mask. https://www.npmjs.com/package/glob
    And a wrapper for it, which allows you to specify several such masks as an array: https://www.npmjs.com/package/glob-all
    It is quite simple, do not look that the stars are not very many.

    We put this package (he himself will pull glob by addiction):

     npm install glob-all --save-dev

    In webpack config:

     var glob = require("glob-all");

    After that, we give the entry points the result, for example:

      entry: { yourAwesomeEntryPoint: glob.sync([ "./someFolder/*.js", "./anotherFolder/*.js" ]),

    Accordingly, masks can be set quite tricky, including regular, more in the documentation for the package.

    In my case, this was enough.

    • one
      @ while1pass yes, it can. About the "entry point that imports everything else" - in the normal case, I would have done so (in my particular case it was impossible =)) - Duck Learns to Take Cover
    • one
      Packages from node_modules are better connected humanly through imports in the file where they are needed. - Duck Learns to Take Cover
    • one
      In my case, this was due to the fact that the entry point was very dumb and not on jsé, the piece was on production, that is, it was not possible to break it, it was stupidly minifying + concatenation, the dependencies were implicit: everything was stupidly written into the global domain. That is, it was very important to keep the same order and that set of bundles that was once and not touch the entry point. That is, it was a small step of a big refactoring. - Duck Learns to Take Cover
    • one
      @ while1pass import accepted module in the place where it is needed. In an amicable way, your application should be one or several trees, where your module is a tree node and the module connection is a connection between nodes. Webpack can run through the tree and collect it in one mote. You can artificially make one of several trees - by adding a vertex - a file with imports. - Duck Learns to Take Cover
    • one
      Here the file with imports is when you need to assemble completely unrelated parts of the application into one bundle, then you can make such a file. But it could be a logical entry point with a router requiring smaller pieces, say. - Duck Learns to Take Cover