|
|
|
步骤 2 : css 模块 步骤 3 : 安装 css-loader 和 style-loader 步骤 4 : style.css 步骤 5 : package.config.js 步骤 6 : a.js 步骤 7 : 运行 步骤 8 : 可运行项目
本教程建立在 cnpm 安装的如下webpack@1.13.2 和 webpack-dev-server@1.15.0 版本上，其他版本未经测试，不确保可用。
cnpm install -g webpack@1.13.2 cnpm install -g webpack-dev-server@1.15.0
在 webpack 的概念里，所有文件都是模块。 所以一个 css 文件也是模块。。。
本文讲解 如何用 css-loader 和 style-loader 把 css 文件作为一个模块打包到 bundle.js 文件里。 (没错。。。 样式也被搞到 js 文件里了。。。)
首先通过如下命令安装 npm install style-loader css-loader --save-dev
npm install style-loader@0.13.1 css-loader@0.25.0 --save-dev
准备 style.css 文件，效果很简单，就是背景色变成蓝色
body {
background-color: blue;
}
body {
background-color: blue;
}
修改 package.config.js，增加 style-loader 和 css-loader。 要使得css 起作用，得同时使用这两个 loader
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets: ['latest']
}
},
{
test:/\.css/,
loader:'style-loader!css-loader'
}
]
}
}
修改a.js ，把 style.css 当作一个模块加进来
require("./style.css") require("./style.css")
const name = 'ES6'
document.write(`hello ${name}`)
require("./style.css")
const name = 'ES6'
document.write(`hello ${name}`)
运行命令，在浏览器看到如图所示背景都变成黑色了。
npm run dev
在右上角有本知识点对应的可运行项目下载 ,实在自己搞不出来，就下载解压出来比较一下。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2019-12-23
index.html好像没用
1 个答案
天际使徒 跳转到问题位置 答案时间：2021-12-26 是这样的index.html，后来人注意了！
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-03-24
无法实现
4 个答案
SHER-11 跳转到问题位置 答案时间：2021-01-08 使用站长代码前记得先npm link webpack 再npm run dev 编译
Ashscc 跳转到问题位置 答案时间：2019-08-16 直接8088/index.html,npm run dev 我的也出不来
genglong 跳转到问题位置 答案时间：2019-05-07 正解
codetothetopest 跳转到问题位置 答案时间：2019-05-05 cnpm install style-loader@0.13.1 css-loader@0.25.0 --save-dev
我加了个c才好的
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-03-23
在操作步骤3的时候一直报错
2018-10-11
步骤五应该是webpack-config.js， 标题写错了
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
