how2j.cn

下载区
文件名 文件大小
webpack-demo.rar 6m
步骤 1 : 版本兼容问题   
步骤 2 : css 模块   
步骤 3 : 安装 css-loader 和 style-loader   
步骤 4 : style.css   
步骤 5 : package.config.js   
步骤 6 : a.js   
步骤 7 : 运行   
步骤 8 : 可运行项目   

步骤 1 :

版本兼容问题

edit
本教程建立在 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 文件里了。。。)
步骤 3 :

安装 css-loader 和 style-loader

edit
首先通过如下命令安装 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;
}
步骤 5 :

package.config.js

edit
修改 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好像没用
kbh13506051596

每次打开localhost总是不显示index内的内容




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, 标题写错了




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-webpack-css-loader 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图