标签: webpack-style-loader

我有两个问题.

1)CSS Loader和Style Loader是两个webpack加载器.我无法理解两者之间的区别.当他们做同样的工作时,为什么我必须使用两个装载机？

2)上面的Readme.md文件中提到的.useable.less和.useable.css是什么？

例如 @import url("~./foobar");

在这里看到它,不确定它是否是某些包特定的东西或它是否是真正的CSS语法.

我正在使用带有webpack的style-loader和反应框架.当我在终端中运行webpack时,我正在Module not found: Error: Cannot resolve module 'style-loader'使用import.js文件,尽管我已正确指定了文件路径.

import '../css/style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import jQuery from 'jquery';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: [
      // Set up an ES6-ish environment
      'babel-polyfill',

      // Add your application's scripts below
      APP_DIR + '/import.js'
    ],
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    }, …

我的webpack配置指定应该使用加载字体url-loader,当我尝试使用Chrome查看页面时,我收到以下错误:

OTS parsing error: invalid version tag
Failed to decode downloaded font: [My local URL]

我的配置的相关部分如下所示:

{
  module: {
    loaders: [
      // ...
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'],
      },
      {
        test: /images\/.*\.(png|jpg|svg|gif)$/,
        loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"',
      },
      {
        test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader?name="[name]-[hash].[ext]"',
      }
    ],
  },
}

在Safari中不会发生这种情况,我还没有尝试过Firefox.

在开发中,我正在提供文件webpack-dev-server,在生产中,它们被写入磁盘并复制到S3; 在这两种情况下,我在Chrome中都会遇到相同的行为.

这也发生在较大的图像上(大于图像加载器配置中的10kB限制).

我是整个Node/NPM/Webpack世界的新手,所以如果这很明显就道歉.

我正在尝试构建一个与Webpack捆绑在一起的简单前端项目.我已安装节点,并配置了package.json文件.如果我在我的根目录中运行"npm start",我从控制台得到没有错误,我可以在浏览器中转到"localhost:3000"并查看我的"hello,world"输出.

我的下一个任务是包含一个样式表,其中包含对图像的引用,如下所示:

.myimg {background: url(path/to/file.jpg);}

设置这样的东西,我可以通过webpack-dev-server查看图像(通过在Web浏览器中访问localhost:3000),但如果我构建项目,图像的路径是错误的.我不知道我做错了什么,所以我把它扔给了Stackiverse,希望那里的人会知道我在做什么愚蠢的事情.

这是我的package.json文件:

{
  "name": "webpack-test1",
  "version": "0.0.1",
  "description": "My project WTF.",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "devDependencies": {
   "css-loader": "^0.15.2",
   "file-loader": "^0.8.4",
   "style-loader": "^0.12.3",
   "url-loader": "^0.5.6"
  },
  "dependencies": {
    "webpack": "^1.9.6",
    "webpack-dev-server": "^1.8.2"
  }
}

...这是我的webpack.config.js文件:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    "./src/start.js"
],
output: {
    filename: "bundle.js",
    path: path.join(__dirname, 'build'),
    publicPath: '/build/'
},
module: {
    loaders: [
        { test: /\.css$/, loader: 'style-loader!css-loader' …

我是webpack的新手,我正在尝试理解加载器及其属性,如测试,加载器,包含等.

这是我在谷歌中找到的webpack.config.js的示例片段.

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'index.js'),
          path.resolve(__dirname, 'config.js'),
          path.resolve(__dirname, 'lib'),
          path.resolve(__dirname, 'app'),
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'test', 'test.build.js')
        ],
        cacheDirectory: true,
        query: {
          presets: ['es2015']
        }
      },
    ]
}

1. 我是对的测试:/. js$/将仅用于扩展名为.js的文件？

2. 加载器:'babel-loader',是我们使用npm安装的加载器

3. 包括:我对此有很多疑问.我是对的,我们放在阵列中的任何东西都会被编译好吗？这意味着,将编译lib,app和src中的index.js,config.js和所有*.js文件.

4. 关于include的更多问题:当文件被转换时,*.js文件是否会连接成一个大文件？

5. 我认为排除是自我解释的.它不会被转化.

6. 查询:{presets:['es2015']}有什么作用？

我试图重新配置我的webpack,现在我无法加载css文件.我将我的风格保存在src> styles> main.css中

我收到的错误如

ERROR in ./src/images/NavIcon03.png
Module build failed: SyntaxError: /Users/myname/work/site/src/images/NavIcon03.png: Unexpected character '?' (1:0) 

这是我的webpack配置

var webpack = require('webpack')


module.exports = {
  entry: [
    './src/main.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel'
    },
        {
          test: /\.css$/, // Only .css files
          loader: 'style!css' // Run both loaders
        }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    contentBase: './'
  }
};

下面是package.json

{
  "name": "website",
  "version": "0.0.1", …

我正在使用的一些第三方模块有自己的CSS文件.我想将它们包含在我的应用程序的一个单个CSS文件中,该文件由Webpack处理.如何将"node_modules"下的CSS文件导入我的CSS文件？

例如,我正在使用第三方react-select模块,但我无法从node_modules以下位置导入其CSS文件:

@import 'react-select/dist/react-datetime.css';

相关的装载机webpack.config.js:

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [
        {
          loader: 'css-loader',
          options: {
            url: false
          }
        }
      ]
    })
  }

使用React组件的CSS的当前实践似乎是使用webpack的样式加载器将其加载到页面中.

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

通过这样做,style-loader将向<style>DOM 注入一个元素.但是,<style>不会在虚拟DOM中,因此如果进行服务器端渲染,<style>将省略.这导致页面有FOUC.

是否还有其他方法可以加载在服务器端和客户端都可以使用的CSS模块？

我的Webpack配置中有以下模块:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, …