23
Cesta k Webpacku
Cesta k Webpacku
-1.5 roku
-1 rok
LiveScript + LESS + AMD Grunt + Require.JS
NO-FRAMEWORK framework
aka vlastní řešení
-0.9972 roku
Require.JS
-3 měsíce
Webpack
Google -> “pete hunt webpack
howto”
package.json:{ "name": "Lilly", "version": "1.0.0", "devDependencies": { "webpack-dev-server": "^1.7.0", "webpack": "^1.7.3" }, "dependencies": { "LiveScript": "^1.3.1", "bootstrap": "^3.3.2", "bootstrap-webpack": "0.0.3", "css-loader": "^0.9.1", "expose-loader": "^0.6.0", "extract-text-webpack-plugin": "^0.3.8", "file-loader": "^0.8.1", "font-awesome": "^4.3.0", "font-awesome-webpack": "gowravshekar/font-awesome-webpack#e22214a", "imports-loader": "^0.6.3", "jquery": "^1.11.2", "less": "^2.0.0", "less-loader": "^2.0.0", "livescript-loader": "^0.1.3", "source-map-loader": "^0.1.3", "style-loader": "^0.8.3", "uglify-js": "^2.4.16", "url-loader": "^0.5.5", "webpack": "^1.5.3" }, "scripts": { "dev": "BUILD_DEV=true webpack-dev-server -d --hot --inline --progress --colors --port 8443 --inline --https --content-base is/ --output-public-path https://localhost:8443/assets/" , "build": "npm run build:queue && webpack -p --progress --profile --colors", "clean": "rm -f www/assets/*", "build:queue": "lsc --compile --bare --print client-src/Skrz/Inlined/queue.ls | uglifyjs --compress --mangle > client-src/Skrz/Inlined/queue.js" }}
webpack.config.js:var webpack = require("webpack");var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = { entry: { all: ["./client-src/Skrz/Bundle/LillyBundle/main"] }, output: { path: "./www/assets", publicPath: "/assets/", filename: "all.js" }, module: { loaders: [ { test: /bootstrap\/js\//, loader: ‘imports?jQuery=jquery' }, { test: /\.ls/, loader: “livescript-loader" }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", “css-loader") }, { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", “css-loader!less-loader") }, { test: /\.(woff2?|ttf|eot|svg|jpg|png|gif|swf)(\?.*)?$/, loader: “file-loader" } ] }, resolve: { extensions: ["", ".js", ".json", ".ls"] }, plugins: [ new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || "true")) }), new ExtractTextPlugin("[name].css") ]
};
<head>:<link rel="stylesheet" href="{$assetsBaseUrl}/all.css">
za <body>:<script>{$queue nofilter}</script><script>skrz.begin();</script>
před </body>:<script>skrz.end();</script><script>skrz.widget("Body");</script><script type="application/json" id=“js-options”>{$options|json_encode nofilter}</script><script src="{$assetsBaseUrl}/all.js"></script>
A dál?
:local v CSShttps://github.com/webpack/css-loader#local-scope
Otázky?
Díky!
