javascript - Webpack ways to duplicate output folder -
i'm using create react app project
this runs on webpack 2.6.1
i'm searching way have generate 2 build folders
- build1
- build2
currently generated 1 folder, named 'build'
both of them should have same generated content, 1 exception
the index.html in build1 , build2 should have different data attr string
<div id="root" data-version="build1"></div> or
<div id="root" data-version="build2"></div> what easiest , fastest way me accomplish that?
the current webpack config im using basic webpack config create-react-app
'use strict'; const autoprefixer = require('autoprefixer'); const path = require('path'); const webpack = require('webpack'); const htmlwebpackplugin = require('html-webpack-plugin'); const casesensitivepathsplugin = require('case-sensitive-paths-webpack-plugin'); const interpolatehtmlplugin = require('react-dev-utils/interpolatehtmlplugin'); const watchmissingnodemodulesplugin = require('react-dev-utils/watchmissingnodemodulesplugin'); const eslintformatter = require('react-dev-utils/eslintformatter'); const modulescopeplugin = require('react-dev-utils/modulescopeplugin'); const getclientenvironment = require('./env'); const paths = require('./paths'); // webpack uses `publicpath` determine app being served from. // in development, serve root. makes config easier. const publicpath = '/'; // `publicurl` `publicpath`, provide our app // %public_url% in `index.ejs` , `process.env.public_url` in javascript. // omit trailing slash %public_path%/xyz looks better %public_path%xyz. const publicurl = ''; // environment variables inject our app. const env = getclientenvironment(publicurl); // development configuration. // focused on developer experience , fast rebuilds. // production configuration different , lives in separate file. module.exports = { // may want 'eval' instead if prefer see compiled output in devtools. // see discussion in https://github.com/facebookincubator/create-react-app/issues/343. devtool: 'cheap-module-source-map', // these "entry points" our application. // means "root" imports included in js bundle. // first 2 entry points enable "hot" css , auto-refreshes js. entry: [ // include alternative client webpackdevserver. client's job // connect webpackdevserver socket , notified changes. // when save file, client either apply hot updates (in case // of css changes), or refresh page (in case of js changes). when // make syntax error, client display syntax error overlay. // note: instead of default webpackdevserver client, use custom 1 // bring better experience create react app users. can replace // line below these 2 lines if prefer stock client: // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), require.resolve('react-dev-utils/webpackhotdevclient'), // ship few polyfills default: require.resolve('./polyfills'), // errors should considered fatal in development require.resolve('react-error-overlay'), // finally, app's code: paths.appindexjs, // include app code last if there runtime error during // initialization, doesn't blow webpackdevserver client, , // changing js code still trigger refresh. ], output: { // next line not used in dev webpackdevserver crashes without it: path: paths.appbuild, // add /* filename */ comments generated require()s in output. pathinfo: true, // not produce real file. it's virtual path // served webpackdevserver in development. js bundle // containing code our entry points, , webpack runtime. filename: 'static/js/bundle.js', // there additional js chunk files if use code splitting. chunkfilename: 'static/js/[name].chunk.js', // url app served from. use "/" in development. publicpath: publicpath, // point sourcemap entries original disk location devtoolmodulefilenametemplate: info => path.resolve(info.absoluteresourcepath), }, resolve: { // allows set fallback webpack should modules. // placed these paths second because want `node_modules` "win" // if there conflicts. matches node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules', paths.appnodemodules].concat( // guaranteed exist because tweak in `env.js` process.env.node_path.split(path.delimiter).filter(boolean) ), // these reasonable defaults supported node ecosystem. // include jsx common component filename extension support // tools, although not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 extensions: ['.js', '.json', '.jsx'], alias: { // support react native web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'react-native-web', }, plugins: [ // prevents users importing files outside of src/ (or node_modules/). // causes confusion because process files within src/ babel. // fix this, prevent importing files out of src/ -- if you'd to, // please link files node_modules/ , let module-resolution kick in. // make sure source files compiled, not processed in way. new modulescopeplugin(paths.appsrc), ], }, module: { strictexportpresence: true, rules: [ // todo: disable require.ensure it's not standard language feature. // waiting https://github.com/facebookincubator/create-react-app/issues/2176. // { parser: { requireensure: false } }, // first, run linter. // it's important before babel processes js. { test: /\.(js|jsx)$/, enforce: 'pre', use: [ { options: { formatter: eslintformatter, }, loader: require.resolve('eslint-loader'), }, ], include: paths.appsrc, }, // ** adding/updating loaders ** // "file" loader handles assets unless explicitly excluded. // `exclude` list *must* updated every change loader extensions. // when adding new loader, must add `test` // new entry in `exclude` list "file" loader. // "file" loader makes sure assets served webpackdevserver. // when `import` asset, (virtual) filename. // in production, copied `build` folder. { exclude: [ /\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, ], loader: require.resolve('file-loader'), options: { name: 'static/media/[name].[hash:8].[ext]', }, }, // "url" loader works "file" loader except embeds assets // smaller specified limit in bytes data urls avoid requests. // missing `test` equivalent match. { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]', }, }, // process js babel. { test: /\.(js|jsx)$/, include: paths.appsrc, loader: require.resolve('babel-loader'), options: { // feature of `babel-loader` webpack (not babel itself). // enables caching results in ./node_modules/.cache/babel-loader/ // directory faster rebuilds. cachedirectory: true, }, }, // "postcss" loader applies autoprefixer our css. // "css" loader resolves paths in css , adds assets dependencies. // "style" loader turns css js modules inject <style> tags. // in production, use plugin extract css file, // in development "style" loader enables hot editing of css. { test: /\.css$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importloaders: 1, }, }, { loader: require.resolve('postcss-loader'), options: { ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 4 versions', 'firefox esr', 'not ie < 9', // react doesn't support ie8 anyway ], flexbox: 'no-2009', }), ], }, }, ], }, // ** stop ** adding new loader? // remember add new extension(s) "file" loader exclusion list. ], }, plugins: [ // makes environment variables available in index.ejs. // public url available %public_url% in index.ejs, e.g.: // <link rel="shortcut icon" href="%public_url%/favicon.ico"> // in development, empty string. new interpolatehtmlplugin(env.raw), // generates `index.ejs` file <script> injected. new htmlwebpackplugin({ inject: false, template: paths.apphtml, }), new htmlwebpackplugin({ inject: false, template: paths.apphtml, }), // makes environment variables available js code, example: // if (process.env.node_env === 'development') { ... }. see `./env.js`. new webpack.defineplugin(env.stringified), // necessary emit hot updates (currently css only): new webpack.hotmodulereplacementplugin(), // watcher doesn't work if mistype casing in path use // plugin prints error when attempt this. // see https://github.com/facebookincubator/create-react-app/issues/240 new casesensitivepathsplugin(), // if require missing module , `npm install` it, still have // restart development server webpack discover it. plugin // makes discovery automatic don't have restart. // see https://github.com/facebookincubator/create-react-app/issues/186 new watchmissingnodemodulesplugin(paths.appnodemodules), // moment.js extremely popular library bundles large locale files // default due how webpack interprets code. practical // solution requires user opt importing specific locales. // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // can remove if don't use moment.js: new webpack.ignoreplugin(/^\.\/locale$/, /moment$/), ], // libraries import node modules don't use them in browser. // tell webpack provide empty mocks them importing them works. node: { fs: 'empty', net: 'empty', tls: 'empty', }, // turn off performance hints during development because don't // splitting or minification in interest of speed. these warnings become // cumbersome. performance: { hints: false, }, };
Comments
Post a Comment