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


相关推荐

  • NVIC简介

    NVIC简介文章目录1.什么是NVIC1.1NVIC结构体定义1.2相应固件库函数1.2.1NVIC_EnableIRQ函数1.2.2NVIC_DisableIRQ函数1.2.3NVIC_GetPendingIRQ函数1.2.4NVIC_SetPendingIRQ函数1.2.5NVIC_ClearPendingIRQ函数1.2.6NVIC_GetActive函数1.2.7NVIC_SetPriority函数1.2.8NVIC_GetPriority函数1.2.9NVIC_Syst

    2022年5月8日
    201
  • jmeter并发测试教程_jmeter怎么进行并发测试

    jmeter并发测试教程_jmeter怎么进行并发测试jmeter是Apache组织开发的基于Java的压力测试工具,用于对软件做压力测试,很多用户使用的时候不知道jmeter怎么进行并发测试,接下来就跟小编一起来看看吧,有需要的小伙伴不要错过!jmeter怎么进行并发测试1、打开jmeter.bat文件,添加线程组,编辑线程数,这里设置100个线程数,循环2次,就是一台机器发送100*2=200个请求。2、点击线程组,右击添加→取样器→HTTP请求…

    2022年9月1日
    3
  • SpringMVC框架–学习笔记(下)

    SpringMVC框架–学习笔记(下)

    2021年9月26日
    46
  • Linux命令–hexdump(以16进制查看文件内容)[通俗易懂]

    Linux命令–hexdump(以16进制查看文件内容)[通俗易懂]本文介绍Linux的tac命令的用法。hexdump用于以16进制查看文件内容

    2022年9月21日
    3
  • PyCharm使用技巧:Navigate-》File(快速查找文件)

    PyCharm使用技巧:Navigate-》File(快速查找文件)PyCharm提供了快速查找文件的功能,快捷键为Ctrl+Shift+N,或者从菜单Navigate-》File打开查找文件界面。

    2022年8月26日
    13
  • node.js介绍及其常用命令

    node.js介绍及其常用命令NodeJs简介:-node.js是提供了一个JavaScript的后台运行环境,简单地说就是运行在服务器端的JS浏览器是Javascript的前端网页的运行环境地址:https://nodejs.org/zh-cn/nodejs和javascript的区别1、nodejs中不支持DOM、BOM的操作支持JS的逻辑运算、函数、数据、json、对象、数组等操作2、专业的说法:Node.js是一个事件驱动I/O服务器的Javascipt运行环境,基于Google的V8引擎,V8引擎执行JS的

    2022年7月16日
    11

发表回复

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

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