如火热链接到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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • idea如何进行debug调试断点上被打了个对钩_debug调试教程

    idea如何进行debug调试断点上被打了个对钩_debug调试教程IDEA如何进行debug调试第一步,设断点,打开debug第二步,使用Debug调试的功能键程序调试,相信是所有程序员必经之路,因为程序写出来是不可能没有错误的,当然除了非常简单的一些程序之外。相信大家肯定使用过不同的编译软件,都有调试功能,在功能上大多都是大同小异,没有什么区别的,可能唯一的区别在于调试按钮的样式和快捷键不一样。接下来我将带领大家来了解IDEA调试功能,以Java程序为例。第一步,设断点,打开debug      &n

    2022年10月15日
    0
  • pcanywhere远程控制的步骤_windows10远程桌面端口修改

    pcanywhere远程控制的步骤_windows10远程桌面端口修改  PcAnywhere远程连接默认端口是5631[数据端口]、5632[状态端口],实际发现其实防火墙打开5631[数据端口]端口就可以自由访问。要改变Pcanywhere数据端口[5631]要去编辑系统注册表,找到以下键值:开始->运行->regedit:HKEY_LOCAL_MACHINE\SOFTWARE\Symantec\pcAny…

    2022年9月13日
    0
  • Windows Server AppFabric Caching

    Windows Server AppFabric CachingWindowsServerAppFabric扩展了WindowsServer的Web应用程序和中间件的托管,管理和缓存功能。AppFabric缓存给WindowsServer带来了一个分布式的,内存中的对象缓存特性,使得扩展高性能的.NET应用,尤其是ASP.NET应用更加方便了。AppFabric的缓存机制为构建高性能的ASP.NET应用提供了很好的解决方案。

    2022年10月16日
    0
  • Lucene/ElasticSearch 学习系列 (1) 为什么学,学什么,怎么学

    Lucene/ElasticSearch 学习系列 (1) 为什么学,学什么,怎么学

    2021年8月24日
    57
  • linux 解压缩zip文件 unzip 命令详解[通俗易懂]

    linux 解压缩zip文件 unzip 命令详解[通俗易懂]linuxunzip命令详解功能说明:解压缩zip文件语法:unzip[-cflptuvz][-agCjLMnoqsVX][-P][.zip文件][文件][-d][-x]或unzip[-Z]补充说明:unzip为.zip压缩文件的解压缩程序。参数:-c将解压缩的结果显示到屏幕上,并对字符做适当的转换。-f更新现有的文件。

    2022年6月5日
    42
  • 怎么用vscode运行java_捷达vs9参数配置

    怎么用vscode运行java_捷达vs9参数配置首先,当然是先下载VSCode官方链接:https://code.visualstudio.comVSCode(VisualStudioCode)官网选择匹配自己的操作系统版本就好(Windows,macOS,Linux),敢说自己是「Codeediting.Redefined.」,看得出来VSCode的底气。VSCode三大特点:免费、开源、跨平台下载运行后,会看到如下的Welcome「欢迎」界面。【VSCode】的颜值和【Github】夜间版都属一流

    2022年10月3日
    0

发表回复

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

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