{"id":18234103,"url":"https://github.com/smartprix/sm-webpack-config","last_synced_at":"2025-04-03T20:33:14.405Z","repository":{"id":57363680,"uuid":"68784007","full_name":"smartprix/sm-webpack-config","owner":"smartprix","description":"Webpack Configuration With Vue, Babel \u0026 Hot Reloading","archived":false,"fork":false,"pushed_at":"2021-05-31T13:55:00.000Z","size":561,"stargazers_count":1,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-07T04:29:31.461Z","etag":null,"topics":["webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smartprix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-21T05:43:08.000Z","updated_at":"2021-05-31T13:55:03.000Z","dependencies_parsed_at":"2022-09-16T07:41:25.410Z","dependency_job_id":null,"html_url":"https://github.com/smartprix/sm-webpack-config","commit_stats":null,"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartprix%2Fsm-webpack-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartprix%2Fsm-webpack-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartprix%2Fsm-webpack-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smartprix%2Fsm-webpack-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smartprix","download_url":"https://codeload.github.com/smartprix/sm-webpack-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223036686,"owners_count":17077357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack"],"created_at":"2024-11-04T17:03:42.511Z","updated_at":"2024-11-04T17:03:43.143Z","avatar_url":"https://github.com/smartprix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Configuration\nWebpack configuration with following features:\n* Hot Reloading in Development\n* Production Optimized Build\n* JSX and Vue\n* Babel\n* Eslint\n* Sane Project Structure\n\n\n# How To Use\n\n## Install\n\nInstall this package\n```bash\nnpm install sm-webpack-config --save-dev\n```\n\n**NOTE**: You need to install `node-sass` if you want to use sass, and `compression-webpack-plugin` if you want to use gzip option.\n\n## Programmatic Usage\n```js\nconst smWebpack = require('sm-webpack-config');\n\n// Set Configuration [Optional]\nconst config = {\n\tsourcePath: 'res',\n\tdestPath: 'static/dist',\n\tpublicUrl: '/static/dist',\n\tsourceMap: true,\n\tdevServerPort: 3001,\n\tappPort: 3000,\n};\n\n// Run Developement Server With Hot Reloading\nsmWebpack.runDevServer({config});\n\n// Build For Production\nsmWebpack.runProdWebpack({config});\n\n// If you want to go advanced and override some webpack configuration\nconst webpackConfig = {\n\tplugins: [\n\t\tnew webpack.optimize.UglifyJsPlugin({\n\t\t\tcompress: {\n\t\t\t\twarnings: true\n\t\t\t}\n\t\t}),\n\t],\n};\n\n// Run Developement Server With Hot Reloading\nsmWebpack.runDevServer({config, webpackConfig});\n\n// Build For Production\nsmWebpack.runProdWebpack({config, webpackConfig});\n\n// NOTE: Both config \u0026 webpackConfig are optional\n```\n\n## CLI Usage\n\n```bash\n# Run devserver with default directory structure and ports assumed\nsm-webpack serve\n\n# Build for production with default \nsm-webpack build\n# OR\nsm-webpack\n\n# Build for development\nsm-webpack build --dev\n\n# Specifiy source and destination\nsm-webpack build --src res/project1 --dest static/dist/project1\n\n# Specify different ports\nsm-webpack serve --dev-port 3050\n```\n\n### Using with config\n\nAdd a `sm-webpack.js` file to your project's root directory with the config for your project exported.\nOr add a \"sm-webpack\" key to your package.json.\n\nEg. sm-webpack.js:\n```js\nmodule.exports = {\n\tsourcePath: 'res/project1',\n\tdestPath: 'static/dist/project1',\n\tpublicUrl: '/static/dist/project1',\n\tdevServer: {\n\t\tport: 3001,\n\t\tappPort: 3000,\n\t},\n};\n```\n\n\n```bash\n# Start project's dev server\nsm-webpack serve\n\n# Build project for production\nsm-webpack\n```\n\n\n#### Multiple projects\n\nIf you have multiple projects you can export an object with multiple confs and use the `--config [keyName]` option to select project.\n\nEg. sm-webpack.js:\n```js\nmodule.exports = {\n\tproject1: {\n\t\tsourcePath: 'res/project1',\n\t\tdestPath: 'static/dist/project1',\n\t\tpublicUrl: '/static/dist/project1',\n\t\tdevServer: {\n\t\t\tport: 3001,\n\t\t\tappPort: 3000,\n\t\t},\n\t},\n\tproject2: {\n\t\tsourcePath: 'res/project2',\n\t\tdestPath: 'static/dist/project2',\n\t\tpublicUrl: '/static/dist/project2',\n\t\tdevServer: {\n\t\t\tport: 3002,\n\t\t\tappPort: 3000,\n\t\t},\n\t},\n}\n```\n\n```bash\n# Start project1's dev server\nsm-webpack serve --config project1\n\n# Build project2 for production\nsm-webpack --config project2\n```\n\n\n## Using with Gulp\nYou can also use it in gulp using the following gulpfile\n```js\nconst smWebpack = require('sm-webpack-config');\nconst gulp = require('gulp');\n\n// The development server (the recommended option for development)\ngulp.task('default', function(callback) {\n\tsmWebpack.runDevServer().then(callback);\n});\n\n// Build files for production\ngulp.task('build', function(callback) {\n\tsmWebpack.runProdWebpack().then(callback);\n});\n```\n\nNow you can use `gulp` to run dev-server and `gulp build` to build for production.\n\n\n## Default Project Structure\n* Keep all your client side code in `res`\n  * all javascript in `js`\n    * vue components in `components`\n\t* 3rd party scripts in `vendor` (though they should generally be installed from npm)\n  * css / scss in `css`\n  * images in `img`\n  * other assests in `assests`\n    * eg. fonts can be kept in `assests/fonts`\n  * directly served static assests in `public`\n    * assests in this directory will not be compiled and copied directly to the `public` folder in dist\n\t* this directory should be used as public root directory in your server config\n  * `index.html` as entry point (no need to include js/css, they will automatically be injected by webpack).\n\n* all the compiled code will be put in `static/dist`\n* point your static server to `static` directory\n* use public path as `/static`\n* api endpoints should start with `/api`\n* Keep your server running at port `3000`\n* Dev server will run at port `3001`\n\n## Webpack Aliases\nThe following aliases are defined\n```js\n// by default config.sourcePath points to `res`, you can override it in your config\n{\n\t'@': config.sourcePath,\n\t'res': config.sourcePath,\n\t'js': path.join(config.sourcePath, 'js'),\n\t'assets': path.join(config.sourcePath, 'assets'),\n\t'components': path.join(config.sourcePath, 'js', 'components'),\n\t'css': path.join(config.sourcePath, 'css'),\n\t'img': path.join(config.sourcePath, 'img'),\n}\n```\n\nSo you can write `import Hello from 'components/Hello.vue'` from anywhere\nIf you want to use images in your vue templates use them as `~img/logo.png` (append a ~)\nSee https://github.com/vuejs/vue-loader/issues/193\n\n## Configuration Options\n```js\nconst config = {\n\t// folder containing source files\n\tsourcePath: 'res',\n\n\t// where to put the compiled files\n\tdestPath: 'static/dist',\n\n\t// at what url are these files accessible\n\t// eg. if using a CDN, you can give http://static.smartprix.com/dist\n\tpublicUrl: '/static/dist',\n\n\t// whether to generate source maps or not\n\tsourceMap: true,\n\n\t// whether to enable eslint or not\n\teslint: true,\n\n\t// entry points for webpack (relative to sourcePath)\n\tentry: {\n\t\tapp: 'js/index.js',\n\t},\n\n\t// html entry file, generated files will be auto-injected into this\n\tentryHtml: 'index.html',\n\n\t// whether the exported file should be a library\n\tlibrary: false,\n\n\t// append hash of the file to the filename\n\tappendHash: true,\n\n\t// whether to minify the output or not\n\t// false in developement, true in production\n\tminify: false,\n\n\t// whether to pre gzip the files\n\t// makes a .gz file for each bundle produced\n\tgzip: false,\n\n\t// whether to delete the existing files in the destination folder\n\tclean: true,\n\n\t// whether to not display much info while running dev server\n\tquiet: true,\n\n\t// babel config\n\tbabel: {\n\t\t// options for @babel/preset-env\n\t\t// https://babeljs.io/docs/en/babel-preset-env.html\n\t\tenvOptions: {\n\t\t\t// target these browsers\n\t\t\t// default targets is based on browsers that support modules\n\t\t\ttargets: {chrome: '61', firefox: '60', safari: '11.1'},\n\t\t},\n\n\t\t// extra presets to include\n\t\tincludePresets: [],\n\n\t\t// don't include these presets (if included by default)\n\t\texcludePresets: [],\n\n\t\t// extra plugins to include\n\t\tincludePlugins: [],\n\n\t\t// don't include these plugins (if included by default)\n\t\texcludePlugins: [],\n\n\t\t// transform imports of the given modules to reduce code size\n\t\t// see: https://www.npmjs.com/package/babel-plugin-transform-imports\n\t\ttransformImports: {},\n\n\t\t// run babel in debug mode\n\t\tdebug: false,\n\t},\n\n\t// postcss config\n\tpostcss: {\n\t\t// baseline for postcss-rem\n\t\tremBaseline: 14,\n\t\t// initial variables for postcss-simple-vars\n\t\tvariables: {},\n\t},\n\n\t// vue loader options\n\t// see: https://vue-loader.vuejs.org/options.html\n\tvue: {\n\t\tcompilerOptions: {\n\t\t\twhitespace: 'condense',\n\t\t},\n\t},\n\n\t// whether to generate analyzer report with the generated bundle\n\t// false in development, true in production\n\t// this can also be an object which will be passed to WebpackBundleAnalyzerPlugin\n\t// analyzeBundle: {openAnalyzer: true, generateStatsFile: true}\n\tanalyzeBundle: false,\n\n\t// whether to build a vue ssr bundle too\n\t// default is false\n\t// can be boolean true / false, or an object\n\t// ssr: false,\n\tssr: {\n\t\t// entry file of ssr bundle\n\t\tentry: 'js/index-server.js',\n\n\t\t// whether to generate source maps for ssr bundle\n\t\tsourceMap: true,\n\t},\n\n\t// enable css modules support for all css files\n\t// NOT: the following files already have module support regardless of this setting\n\t//   \u003cstyle module\u003e in .vue\n\t//   .module.css files\n\t//   .css?module files\n\tcssModules: false,\n\n\t// dev server and hot reloading options\n\tdevServer: {\n\t\t// dev server middlewares\n\t\tbefore(app, server) {},\n\t\tafter(app, server) {},\n\n\t\t// dev server host\n\t\thost: '0.0.0.0',\n\n\t\t// dev server port\n\t\tport: 3001,\n\n\t\t// use https\n\t\thttps: false,\n\n\t\t// whether to open the web browser\n\t\topen: true,\n\n\t\t// what port the app server is running\n\t\tappPort: 3000,\n\n\t\t// the paths to proxy on the dev-server\n\t\tproxy: {\n\t\t\t'/api': 'http://localhost:\u003cappPort\u003e',\n\t\t\t'/static': 'http://localhost:\u003cappPort\u003e',\n\t\t\t'/uploads': 'http://localhost:\u003cappPort\u003e',\n\t\t},\n\n\t\t// notify using os-native notification whenever an error occurs\n\t\tnotifyOnError: true,\n\n\t\t// build the ssr bundle too when running dev server\n\t\t// config.ssr must be set too\n\t\tbuildSSR: true,\n\t},\n\n\t// overrides for production environment\n\t$env_production: {\n\t\tminify: true,\n\t\teslint: false,\n\t},\n\n\t// overrides for development environment\n\t$env_development: {\n\t\teslint: true,\n\t},\n};\n```\n\n## SSR (Server Side Rendering)\n`sm-webpack-config` includes support for Vue SSR. Everything should work if you set the `config.ssr` option. Building will give bundles for both server side and client side.\n\nDefault bundle file names are as given by vue.\n**Server Bundle:** `vue-ssr-server-bundle.json`\n**Client Manifest**: `vue-ssr-client-manifest.json`\n\nYou'll need to use `createBundleRenderer` from `vue-server-renderer` for SSR. For more details see [Vue SSR docs](https://ssr.vuejs.org/guide/bundle-renderer.html#enter-bundlerenderer)\n\n#### Running Dev Server With SSR\nRunning dev server with ssr support is a bit tricky. You'll need to use your own server and koa middleware provided by `sm-webpack-config` to set it up. `koaDevServer` fires a `vue-ssr` event with `{serverBundle, clientManifest}` as parameters whenever a new ssr bundle is ready.\n\nHere's a quick example\n```js\nconst Koa = require('koa');\nconst {createBundleRenderer} = require('vue-server-renderer');\nconst {koaDevServer} = require('sm-webpack-config');\n\nconst app = new Koa();\n\nconst template = fs.readFileSync('./res/index.html', 'utf-8');\nfunction createRenderer(bundle, clientManifest) {\n\tconst options = {\n\t\tclientManifest,\n\t\ttemplate,\n\t\trunInNewContext: false,\n\t};\n\treturn createBundleRenderer(bundle, options);\n}\n\nconst buildConfig = {\n\t// your build config\n\tentry: {\n\t\tapp: 'js/index-client.js',\n\t},\n\tdevServer: {\n\t\tport: 3002,\n\t\tappPort: 3000,\n\t},\n\tssr: {\n\t\tentry: 'js/index-server.js',\n\t\tsourceMap: true,\n\t},\n};\n\nconst devServer = koaDevServer({\n\tconfig: buildConfig,\n});\n\nlet renderer;\n// dev server fires vue ssr event whenever a new bundle is generated\n// we replace the renderer each time it is fired (hot loading)\ndevServer.on('vue-ssr', ({serverBundle, clientManifest}) =\u003e {\n\trenderer = createRenderer(serverBundle, clientManifest);\n});\nconst renderToString = (...args) =\u003e {\n\tif (!renderer) return 'Waiting to generate renderer...';\n\treturn renderer.renderToString(...args);\n};\n\napp.use(devServer.middleware());\napp.use(async (ctx, next) =\u003e {\n\tconst ssrContext = {url: ctx.url};\n\tctx.body = await renderToString(ssrContext);\n});\n\napp.listen(3000);\n```\n\n**For a more complete setup with production + dev server ssr, see [SSR Example](examples/ssr)**\n\n\n# Rollup\n`sm-webpack-config` also includes rollup. You can use it as:\n```js\nconst smWebpack = require('sm-webpack-config');\n\nconst config = {\n\tentry: 'src/index.js',\n\tdest: 'dest/index.js',\n\tlibrary: 'vutils',\n\tlibraryFormat: 'es',\n\tminify: false,\n\tsourceMap: false,\n\n\t// overrides for production environment\n\t$env_production: {\n\t\tminify: true,\n\t},\n\n\t// overrides for development environment\n\t$env_development: {\n\t\tminify: false,\n\t},\n};\n\nsmWebpack.runRollup({config}).then(() =\u003e {\n\tconsole.log(\"Done!\");\n});\n```\n\n#### Rollup Configuration Options\n```js\nconst config = {\n\t// entry point of the script (source)\n\tentry: 'src/index.js',\n\n\t// where to put compiled file\n\tdest: 'dist/index.js',\n\n\t// library name to give to the module\n\tlibrary: 'lib',\n\n\t// what format should the compiled file be in\n\t// this can be umd, amd, cjs (node like format), es (import / export), iife (for using in \u003cscript\u003e)\n\tlibraryFormat: 'umd',\n\n\t// whether to uglify the output\n\tminify: false,\n\n\t// whether to generate a sourcemap or not\n\tsourceMap: false,\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartprix%2Fsm-webpack-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmartprix%2Fsm-webpack-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmartprix%2Fsm-webpack-config/lists"}