{"id":734,"date":"2018-10-19T12:45:56","date_gmt":"2018-10-19T11:45:56","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=734"},"modified":"2022-09-29T15:07:05","modified_gmt":"2022-09-29T14:07:05","slug":"webpack","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/webpack\/","title":{"rendered":"WebPack"},"content":{"rendered":"\n<p><a href=\"https:\/\/webpack.js.org\/api\/cli\/\">https:\/\/webpack.js.org\/api\/cli\/<\/a><\/p>\n\n\n\n<p>Start webpack project from command-line:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx webpack init .\/my-app --force --template=default<\/pre>\n\n\n\n<p><a href=\"https:\/\/webpack.js.org\/concepts\/\">https:\/\/webpack.js.org\/concepts\/<\/a><\/p>\n\n\n\n<p><strong>Example webpack config<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const path = require('path');\n\/\/const webpack = require('webpack');\n\nmodule.exports = {\n    entry: {\n        player: '.\/src\/index.js'\n    },\n    output: {\n        path: path.resolve(__dirname, '..\/..\/src\/build'),\n        filename: 'app-player.js'\n    },\n    module: {\n        rules: [\n            {\n                enforce: 'pre',\n                test: \/\\.js$\/,\n                exclude: \/node_modules|shared\\\\lib\/,\n                loader: 'eslint-loader',\n                options: {\n                    useEslintrc: true\n                }\n            },\n            {\n                test: \/\\.js$\/,\n                exclude: \/node_modules\/,\n                loader: 'babel-loader',\n                options: {\n                  presets: ['babel-preset-es2015'].map(require.resolve)\n                }\n            },\n            {\n                test: \/\\.css$\/,\n                use: ['css-loader']\n                \/\/ options: {\n                \/\/     sourceMap: true\n                \/\/ }\n            }\n        ]\n    },\n    stats: {\n        colors: true\n    },\n    resolve: {\n        alias: {\n            wiring: path.resolve(__dirname, '..\/shared\/wiring'),\n            shared: path.resolve(__dirname, '..\/shared\/'),\n            bluebird: path.resolve(__dirname, '..\/shared\/lib\/bluebird.min'),\n            'socket.io': path.resolve(__dirname, '..\/shared\/lib\/socket.io'),\n            jquery: path.resolve(__dirname, '..\/shared\/lib\/jquery'),\n            'jquery.transit': path.resolve(__dirname, '..\/shared\/lib\/jquery.transit'),\n            sammy: path.resolve(__dirname, '..\/shared\/lib\/sammy'),\n            tweenmax: path.resolve(__dirname, '..\/shared\/lib\/TweenMax.min')\n        }\n    },\n    devtool: 'source-map'\n};\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n  \"name\": \"example-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"build-dev\": \"webpack --mode=development --source-map --info-verbosity verbose\",\n    \"test\": \"webpack --mode=development --watch -w --config webpack-test.config.js\",\n    \"run-dev\": \"webpack --mode=development --source-map --watch --info-verbosity verbose\",\n    \"build\": \"webpack --mode=production\"\n  },\n  \"author\": \"\",\n  \"license\": \"UNLICENCED\",\n  \"devDependencies\": {\n    \"babel-eslint\": \"^8.2.2\",\n    \"babel-loader\": \"^7.1.4\",\n    \"babel-preset-es2015\": \"^6.24.1\",\n    \"css-loader\": \"^0.28.11\",\n    \"eslint\": \"^4.19.1\",\n    \"eslint-loader\": \"^2.0.0\",\n    \"eslint-plugin-react\": \"^7.7.0\",\n    \"mocha\": \"^5.0.5\",\n    \"webpack\": \"^4.4.1\",\n    \"webpack-cli\": \"^2.0.13\",\n    \"webpack-node-externals\": \"^1.7.2\",\n    \"webpack-shell-plugin\": \"^0.5.0\"\n  }\n}\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var path = require('path');\nvar webpack = require('webpack');\n\nvar nodeExternals = require('webpack-node-externals');\nvar WebpackShellPlugin = require('webpack-shell-plugin');\n\nmodule.exports = {\n    entry: {\n        'player-tests': '.\/src\/tests.js',\n    },\n    output: {\n        path: path.resolve(__dirname, 'dist'),\n        filename: 'app-[name].js'\n    },\n    stats: {\n        colors: true\n    },\n    externals: [nodeExternals()],\n    target: 'node',\n    node: {\n        fs: 'empty'\n    },\n    plugins: [new WebpackShellPlugin({\n        onBuildExit: \"mocha dist\/app-player-tests.js\"\n    })],\n    resolve: {\n        alias: {\n            jquery: path.resolve(__dirname, 'lib\/jquery'),\n            'jquery.transit': path.resolve(__dirname, 'lib\/jquery.transit'),\n            sammy: path.resolve(__dirname, 'lib\/sammy')\n        }\n    },\n    devtool: 'source-map'\n};\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/webpack.js.org\/api\/cli\/ Start webpack project from command-line: https:\/\/webpack.js.org\/concepts\/ Example webpack config<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-734","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=734"}],"version-history":[{"count":5,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/734\/revisions"}],"predecessor-version":[{"id":6812,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/734\/revisions\/6812"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}