Webpack 教程之使用 loaders
打赏作者

liudong0763

老师唱歌不好听呀

JellyBool 回复 liudong0763

我擦,普通话本来就不好,而且五音不全,不过这都不是重点。

噼里啪啦小蛋哥

为啥pad不能看这些视频呢

JellyBool 回复 噼里啪啦小蛋哥

这个应该是 videojs 的问题

chenxin

推荐给你一个软件Quicksilver个人觉得搜索起来跟方便,用了半年了,感觉比自带的好用。。

sunnirvana

loader: “style!css” 这种写法,是先执行css-loader再执行style-loader,这个管道流向好奇怪

a359611223 回复 sunnirvana

头像玩年 哈哈哈哈

gelove

https://gist.github.com/JellyBool
没看到webpack lesson1

JellyBool 回复 gelove

大概这个样子:

module.exports = {
    devtool: "sourcemap",
    entry: "./js/entry.js",
    output: {
        filename:"bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            }
        ]
  }
};
ArtistLu

在测试那个css-loader的时候 用webpack命令 出现 Cannot find module ‘loader-utils’ 是怎么回事呢 我看了下entry.js里require css的路径 都是对的啊

JellyBool 回复 ArtistLu

删除 node_modules 目录再重新 npm install,或者你重新安装 loader

ArtistLu 回复 JellyBool

it works!

bit世界风

单词写错了 style 不是styel

rocklyt

为什么我添加babel后,执行webpack非常慢呢,需要20多秒,我是在windows下,没加babel之前是正常的2秒左右

iralance

很棒

wenqingzzz

2.0不支持缩写了,应该会报错的,可以修改成

module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
JellyBool 回复 wenqingzzz

这种评论是最好的!!!

程言方 回复 JellyBool

非常棒。。。哈哈哈

578101804 回复 wenqingzzz

确实是报错了,找了半天才发现问题
loader:“bable”里面ES6配置也是不对,直接删掉了

Jarvis5780 回复 wenqingzzz

找半天,感谢哥

Ericxie 回复 wenqingzzz

谢谢,成功解决了报错

xshaitt

2.0写法已经改变了,这是最新的写法

module: {
       rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.jsx$/,
                loader: "babel-loader", // Do not use "use" here
                exclude: /node_modules/,
                options: {
                    presets: ['es2015','stage-0'],
                    plugins: ['transform-runtime']
                }
            }
        ]
    },
a359611223 回复 xshaitt

这个方法可以

Nixus 回复 xshaitt

怎么感觉 2.x 的 webpack 更复杂了

Ericxie 回复 xshaitt

这方法可以,webpack 运行成功

f4cklangzi 回复 xshaitt

这个能运行成功是因为正则写错了…

mlkr

报错: Uncaught SyntaxError: Unexpected token import。 改为

module: {
	loaders: [
		{
			test: /\.css$/,
			loader: "style!css"
		},
		{
			test: /\.js$/,
			loader: "babel",
			exclude: /node_modules/,
			query: {
	          presets: ['es2015']
	        }
		}
	]
},

来自 https://segmentfault.com/a/1190000004457636
解决

Addison 回复 mlkr

我的还是不可以哦~

mlkr

应该是
module: {
loaders: [
{
test: /.css/, loader: "style!css" }, { test: /\.js/,
loader: “babel”,
exclude: /node_modules/,
query: {
presets: [‘es2015’]
}
}
]
},
这个, 上面复制错了。 来自 https://segmentfault.com/a/1190000004457636

Devil-MCry
Module not found: Error: Can't resolve 'style' in 'C:\Users\Administrator\Desktop\webpack'

webpack会报错, 修改成 { test: /.css$/, loader: “style-loader!css-loader” } 就OK了!

YVEND

嘟嘟,嘟嘟。

a359611223
[0] ./js/module-one.js 55 bytes {0} [built]
   [1] ./js/module-two.js 26 bytes {0} [built]
   [2] ./css/style.css 1.03 kB {0} [built]
   [3] ./js/entry.js 84 bytes {0} [built]
   [4] ./~/css-loader?{"modules":true}!./css/style.css 193 bytes {0} [built]
   [5] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [6] ./~/jquery/dist/jquery.js 268 kB {0} [built]
   [7] ./~/style-loader/lib/addStyles.js 8.66 kB {0} [built]
   [8] ./~/style-loader/lib/urls.js 3.01 kB {0} [built]

为什么我输入webpack命令没问题 但是背景颜色却没有变化呢

JellyBool 回复 a359611223

什么背景色》?

命令行工具的背景色?这个跟你使用的工具和配置有关

a359611223 回复 JellyBool

webpack 没报错 我再试一次 清除一下缓存试试

a359611223 回复 JellyBool

现在没问题了 可能之前有些东西敲的不对 重新来了一遍

holyland

老师普通话好接地气>-<

JellyBool 回复 holyland

你这个评价很高!

haohexin

卡住了 一直在唱歌怎么办

JellyBool 回复 haohexin

不会吧,这么尴尬。。。。。

zjhjh123

我在引入CSS的时候。webpack 时出现这样的错
You may need an appropriate loader to handle this file type.

JellyBool 回复 zjhjh123

你看看上面的评论,然后再检查是否少了某个 loader

zjhjh123 回复 JellyBool

OK啦 ( 请认真发评论哦,至少 6 个字符)

donglianyou 回复 JellyBool

为什么我使用webpack编译之后出现这个错误:

ERROR in ./js/entry.js
Module not found: Error: Can't resolve 'style' in 'F:\htdocs\webpack.cn'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using            loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-m           odule-name-extension-removed
2kpo

import $ from ‘jquery’; jq的语句没有效果 之前require进来也是无效的 webpack编译没有报错 也执行过npm install jquery --save-dev ps:出了jq 其他都是没有问题的

JellyBool 回复 2kpo

具体是什么代码没有效果?

lilu

ERROR in ./js/entry.js
Module build failed: TypeError: fileSystem.statSync is not a function
at module.exports (/Users/liuyi/study/webpack2/node_modules/babel-loader/lib/utils/exists.js:7:25)
at find (/Users/liuyi/study/webpack2/node_modules/babel-loader/lib/resolve-rc.js:13:9)
at Object.module.exports (/Users/liuyi/study/webpack2/node_modules/babel-loader/lib/index.js:113:132)

Nixus

感觉 webpack 2.x 的配置太复杂了

sunlonghb

module.exports = {
entry: ["./entry.js"],
output: {
filename: “bundle.js”
},
module: {
loaders: [
{
test: /.css/, loader:'style-loader!css-loader' }, { test:/\.js?/,
exclude:/node_modules/,
loader:‘babel-loader’,
query:{
presets:[‘es2015’]
}
},
]
},

}

Addison

{
test:/.js$/,
loader:“babel-loader”,
exclude:/node_modules/,

        }
    ]
},
babel:{
    preset: ['es2015','stage-0'],
    plugins: ['trsnsform-runtime']

}
};

Addison

我的还是实现不了哦
尴尬C:\Users\janicerant\Desktop\webpack-learning>webpack
C:\Users\janicerant\Desktop\webpack-learning\webpack.config.
js:23
},
^

SyntaxError: Invalid or unexpected token
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions…js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at requireConfig (C:\Users\janicerant\AppData\Roaming\np
m\node_modules\webpack\bin\convert-argv.js:97:18)

JellyBool 回复 Addison

Invalid or unexpected token

这个报错感觉是配置文件搞错了,哪里多了个标点符号什么的

Zhijieyan

唱歌嘛 简直就不谈啦

liujun

webpack4.0:

 The CLI moved into a separate package: webpack-cli.
 Please install 'webpack-cli' in addition to webpack itself to use the CLI.
 -> When using npm: npm install webpack-cli -D
 -> When using yarn: yarn add webpack-cli -D

从安装开始就掉坑,官网写的也很晦涩

Ericxie 回复 liujun

webpack 4.0 需要 安装 webpack-cli 才能使用命令行工具

MyPuppet

###webpack4中的安装及配置
babel loader安装
npm i @babel/core babel-core babel-loader babel-preset-env babel-runtime -D
package.json 加入如下配置

	"babel":{
		"presets": ["env"],
		"plugins": []
	  }
18yt

最新版webpack

module: {
rules: [
{
test: /.css/, use: [ { loader: 'style-loader' }, {loader: 'css-loader'} ] }, { test: /\.m?js/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’],
plugins: [’@babel/plugin-transform-runtime’]
}
}
}
]
}