extract-text-plugin

来源： https://stackoverflow.com/questions/42977879/webpack-building-both-css-and-js-files

来源： https://stackoverflow.com/questions/42977879/webpack-building-both-css-and-js-files

来源： https://stackoverflow.com/questions/42977879/webpack-building-both-css-and-js-files

问题 I'm building a react app and im using webpack 3 with css/sass loaders + the ExtractTextPlugin to compile my styles and generate main.css. All my scss variables, mixins and partials are compiling into one single main.css file, but my problem is that im getting duplicate classes in main.css . I have a main.scss where I import all of my variables, mixins and partials. Im also using the underscore prefix for all of my partials, variables etc. I cant figure out what the problem is! webpack.config

问题 My Webpack config contains the following loaders. module: { loaders: [ { test: /\.js$/, loader: "babel", exclude: /node_modules/ }, { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ } ] }, Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this. var ExtractTextPlugin = require("extract-text-webpack-plugin"); module: { loaders: [ { test: /\.js$/, loader: "babel",

问题 I would like to ask how can I link the generated css files with a hash name to my index.html after I run the npm for my production: "build-production": "webpack -p --progress --colors --config webpack.config.production.js" This is the plugin in my webpack config that will generate the filename with hash since every time I build for production it generates a new hash filename. Is there a way that can automatically do it without manually editting the index.html? plugins: [ new ExtractTextPlugin

问题 I am writing a Webpack plugin that should replace a part of the JS code with a list of Webpack's generated CSS files. Imaging this JS code: ReactWebComponent.create(<App />, 'react-web-component', { injectReactWebComponent: true }); I want to replace the injectReactWebComponent: true part with injectReactWebComponent: '<link href="static/css/main.cacbacc7.css" rel="stylesheet">' While that link tag is a file generated by Webpack. My (kind of working) code for this goes as follows:

问题 I'm trying to implement extract-text-webpack-plugin using webpack 2 and I'm building my webpack.config.js from scratch. When I wanted to add the plugin I followed the instructions on npm. This however gives me the following error: TypeError: Cannot read property 'query' of undefined I've looked around and didn't catch anyone else having the same problem with this plugin. I'd rather first ask if I've maybe made a mistake before assuming this is a bug. My webpack.config.js is const path =

问题 Versions "extract-text-webpack-plugin": "^2.0.0-rc.2", "webpack": "^2.2.0", "webpack-dev-server": "^2.2.1" Issue "extract-text-webpack-plugin": "^1.0.1", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" No longer able to HMR css/scss since upgrading to version 2, changing the styles triggers a change (see output sample below) but I have to manually refresh the page to see the changes the page does not auto refresh, also if I make a change to a js file after changing a scss file the

问题 When using webpack 2(or 3), I could write code like: const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css'); const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css'); rules: [ { test: /\.scss$|\.css$/, include: path.resolve(__dirname, './styles/App.scss'), use: coreStyles.extract({ use: ['css-loader', 'sass-loader'] }) }, { test: /\.scss$|\.css$/, exclude: path.resolve(__dirname, './styles/App.scss'), use: componentStyles.extract({ use: ['css-loader',