How to configure Webpack DevTools workspaces? -
how configure webpack devtools workspaces? began developing webpack.
before compilation has been through ruby (the console), , through dev tools chrome canary, scss/css file , sourcemap files saved locally, , updated. screen dev tools chrome: prntscr.com/cgxr6z
question: need detailed action algorithm. how make dev tools canary, showed changes in scss/js files rather after full page reload?
thank help)
config webpack:
var webpack = require('webpack'); var path = require('path'); var extracttextplugin = require("extract-text-webpack-plugin"); var plugins = []; var production = false; if (production) { plugins.push( new webpack.optimize.uglifyjsplugin({ compress: { warnings: false } }) ); } plugins.push( new extracttextplugin( path.join( '..', 'css', 'theme.css' ) ) ); module.exports = { entry: [ './js/theme.js' ], output: { path: '../assets/js', filename: 'theme.js' }, module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] }, { test: /\.scss$/, loader: extracttextplugin.extract( "style", "css?sourcemap!postcss!sass?sourcemap" ) }, { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'file-loader?name=../css/[hash].[ext]' }, { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }] }, postcss: function() { return [require('postcss-flexibility')]; }, externals: { prestashop: 'prestashop' }, debug: true, devtool: 'inline-source-map', plugins: plugins, resolve: { extensions: ['', '.js', '.scss'] } };
Comments
Post a Comment