|
|
|
步骤 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||
