从零开始学webpack的笔记 3
2020-04-28 本文已影响0人
Sasoli
自行学习整理,边学边记,没了解过webpack的同学可以一点点看完,或许会有些帮助,不成熟的地方欢迎指正,转载请注明出处!!!
js和html都打包了,那下一步当然就是样式文件了,先从普通的css文件说起
1,编辑index.css文件
简单的写个样式就行
body{
background: skyblue;
}
然后在index.js引入css文件
import Show from './show.js';
import './index.css';
Show();
function component () {
let element = document.createElement('div');
element.innerHTML = 'Hello webpack123'
return element;
}
document.body.appendChild(component());
2,打包css文件
需要安装两个插件css-loader和style-loader
npm i css-loader style-loader -D
什么是loader呢?这里粘贴webpack官网的解释
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
简言之,loader就是把其他东西转为js
3,编辑webpack.config.js文件
需要增加module,先看代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = () => {
return {
// entry: path.resolve(__dirname, 'src/index.js'),
// entry: path.resolve(__dirname, 'src', 'index.js'),
entry: {
index: [path.resolve(__dirname, 'src/index.js')]
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader'
// },
'style-loader',
// {
// loader: 'css-loader',
// options: {
// modules: true
// }
// },
'css-loader'
]
}
]
}
}
}
注释:
这里用到的module,rules,test,use解释起来比较麻烦,可以点击前往官网查看说明
module.rules
test
use
条件
注意:
loader的执行顺序是从下到上,也就是这里会先执行'css-loader',然后再执行'style-loader',如果写反,会报错
4,重新npm start
应该就能看到样式了,不过此时样式是以style标签直接写在html中的,这是style-loader的效果
其他各种loader的功能可以点击loaders
查看,建议看一些常用的loader,可以让你了解ues中的顺序到底应该怎么放,至于哪些是常用的,去自己做过的项目里看或者百度都ok
推荐看一下css-loader
及下面的modules,因为这可能是最基本的部分