如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

我试图在Webpack中启用热样式装入器,但是我找不到正确的配置。这里是我的webpack.config.js:用于在Webpack中启用热式样装入器以同步css的配置

const webpack = require(‘webpack’);

const path = require(‘path’);

const buildPath = path.resolve(__dirname, ‘build’);

const nodeModulesPath = path.resolve(__dirname, ‘node_modules’);

const TransferWebpackPlugin = require(‘transfer-webpack-plugin’);

const config = {

entry: [

‘webpack/hot/dev-server’,

‘webpack/hot/only-dev-server’,

path.join(__dirname, ‘/src/app/app.js’),

],

resolve: {

extensions: [“”, “.js”],

},

devServer: {

contentBase: ‘src/www’,

devtool: ‘eval’,

hot: true,

inline: true,

port: 3232,

host: ‘0.0.0.0’,

},

devtool: ‘eval’,

output: {

path: buildPath,

filename: ‘app.js’,

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new TransferWebpackPlugin(

[{ from: ‘www’ }],

path.resolve(__dirname, “src”)

),

],

module: {

loaders: [

{

test: /\.js$/,

loaders: [‘react-hot’, ‘babel-loader’],

exclude: [nodeModulesPath],

},

{

test: /\.css$/,

loader: “style!css”,

},

],

},

eslint: {

configFile: ‘.eslintrc’,

},

};

module.exports = config;

而且我package.js文件:

{

“name”: “test-material-ui”,

“version”: “0.0.0-beta.1”,

“description”: “Sample project that uses material-ui”,

“scripts”: {

“start”: “webpack-dev-server –config webpack.config.js –progress –inline –colors”,

“build”: “webpack -p –define process.env.NODE_ENV=’\”production\”‘ –config webpack-production.config.js –progress –colors”,

“lint”: “eslint src && echo \”eslint: no lint errors\””

},

“private”: true,

“devDependencies”: {

“babel-core”: “^6.3.26”,

“babel-eslint”: “^6.0.0”,

“babel-loader”: “^6.2.4”,

“babel-preset-es2015”: “^6.3.13”,

“babel-preset-react”: “^6.3.13”,

“copy-webpack-plugin”: “^2.1.3”,

“css-loader”: “^0.23.1”,

“eslint”: “^2.5.1”,

“eslint-plugin-react”: “^4.0.0”,

“html-webpack-plugin”: “^2.7.2”,

“react-hot-loader”: “^1.3.0”,

“style-loader”: “^0.13.1”,

“transfer-webpack-plugin”: “^0.1.4”,

“webpack”: “^1.12.9”,

“webpack-dev-server”: “^1.14.0”

},

“dependencies”: {

“flexboxgrid”: “^6.3.0”,

“material-ui”: “^0.15.0-beta.1”,

“react”: “^15.0.1”,

“react-addons-css-transition-group”: “^15.0.1”,

“react-dom”: “^15.0.1”,

“react-redux”: “^4.4.5”,

“react-tap-event-plugin”: “^1.0.0”,

“redux”: “^3.4.0”

}

}

但无论我如何配置它,我不能让热同步工作(为的CSS,对于.js文件它工作得很好)!有人能告诉我正确的方法吗?

2016-05-06

Mehran

+1

只是为了排除这种可能性;你知道你必须要求JavaScript中的CSS? –

+0

@hansn你真棒,非常感谢你。 –

+0

如果您以帖子的形式发帖,我很乐意将其标记为答案。 –

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/111259.html原文链接:https://javaforall.net

(0)
上一篇 2021年8月16日 下午8:00
下一篇 2021年8月16日 下午9:00


相关推荐

  • JSONPath表达式

    JSONPath表达式前言JSONPath是一种简单的方法来提取给定JSON文档的部分内容。JSONPath提供的json解析非常强大,它提供了类似正则表达式的语法,基本上可以满足所有你想要获得的json内容。JSONPath表达式语法1、操作符?:问号,标记表达式的开头。使用的语法[?(表达)]例如:[?(Expression)]@:在符号处表示正在处理的当前节点。语法使用$.books[?@.price>100]注意:使用JSONPath的[]操作符操作一个对象或者数组,索引是从0开始。

    2022年6月24日
    189
  • 究竟开发人员须要掌握多少门语言?「建议收藏」

    究竟开发人员须要掌握多少门语言?

    2022年2月1日
    44
  • shadowrock端口被占用_打开端口失败怎么处理

    shadowrock端口被占用_打开端口失败怎么处理右键选择选项设置

    2025年8月29日
    10
  • CCCardinalSplineBy概念

    CCCardinalSplineBy概念

    2021年12月2日
    41
  • WPF 控件与布局

    WPF 控件与布局控件到底是什么 nbsp nbsp 程序的本质就是 数据 算法 用户输入原始的数据 算法处理原始数据并得到结果数据 问题就在于程序如何将结果数据显示给用户 同样一组数据 你可以使用 LED 阵列显示出来 或者以命令行模式借助各种格式控制符 如 TAB 对齐并输出 但这些都不如图形界面 GUI nbsp GraphicUserI 来的友好和方便 GUI 的方便在于它对数据展示的直观性

    2026年3月18日
    3
  • Numpy中ndim、shape、dtype、astype的用法

    Numpy中ndim、shape、dtype、astype的用法本文介绍numpy数组中这四个方法的区别ndim、shape、dtype、astype。1.ndimndim返回的是数组的维度,返回的只有一个数,该数即表示数组的维度。2.shapeshape:表示各位维度大小的元组。返回的是一个元组。对于一维数组:有疑问的是为什么不是(1,6),因为arr1.ndim维度为1,元组内只返回一个数。对于二维数组:前面的是行,后面的是列,他的ndim为2,所以返回两…

    2022年6月14日
    38

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号