webpack
webpack作用
JS是整个应用的核心入口
一起资源均由JS管理依赖
一切资源均有webpack打包发布
安装
npm install webpack webpack-cli --save-dev
运行语法
npx webpack a.js -o pack.js --mode development
各个文件
src/05-webpack-main.js
var module = require('./05-webpack-module.js');
module.say();
src/05-webpack-module.js
module.exports = {
say: function(){
console.log('hello from module');
}
}
build/05-webpack-main.js
建一个空文件。build/05-webpack-main.js
webpack-main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "build/05-webpack-main.js"></script>
</head>
<body>
</body>
</html>
运行
npx webpack src/05-webpack-main.js -o build/05-webpack-main.js --mode development
打开html,控制台能看到“hello from module”
CSS的使用
npm i css-loader style-loader
配置文件
webpack.config.js
module.exports = {
module:{
rules:[{
test:/\.css$/,
use:['style-loader','css-loader']
}]
}
}
建一个空文件。build/06-webpack-main.js
webpack-main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src = "build/06-webpack-main.js"></script>
</head>
<body>
hello
</body>
</html>
06-webpack-css.css
body{
color: red;
}
06-webpack-main.js
require('./06-webpack-css.css');
console.log('hello');
运行
npx webpack src/06-webpack-main.js -o build/06-webpack-main.js --mode development
打开html,控制台打出hello,并且html显示的hello是红色
css modules
各个文件
src/07-webpack-component.css
.p{
font-size: 16px;
color: #999;
}
.red{
color: red;
}
.green{
color: green;
}
src/07-webpack-component.js
var styles = require('./07-webpack-component.css');
exports.init = function ($dom) {
$dom.innerHTML = '<p class="'+ styles.p + '">我是一个自给自足的组件</p>'
+'<p class="'+ styles.p + ' '+styles.red + '">我有时候是红的</p>'
+'<p class="'+ styles.p + ' '+ styles.green + '">有时候是绿的</p>';
}
注意空格'<p class="'+ styles.p + ' '+styles.red + '">我有时候是红的</p>'
src/07-webpack-main.js
const component = require('./07-webpack-component');
document.addEventListener('DOMContentLoaded', function(){
component.init(document.querySelector('#component'));
});
配置
module.exports = {
module:{
rules:[{
test:/\.css$/,
use:['style-loader',{
loader: 'css-loader',
options:{
modules: true
}
}]
}]
}
}
extract-text-webpack-plugin
安装
npm install --save-dev extract-text-webpack-plugin@next
配置
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module:{
rules:[{
test:/\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
modules: true
}
}
})
}]
},
plugins:[
new ExtractTextPlugin('07-webpack-main.css')
]
}
运行后的css文件 07-webpack-main.css
._3hcHhNzNHnhDdcBTkxqfnp{
font-size: 16px;
color: #999;
}
.G2o67eUP0HgqAsRkU2Z9u{
color: red;
}
._3kfzCygPX_XLixKQ3_yPqa{
color: green;
}
在css modules时跟header一起加载的css就提取了出来
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="build/07-webpack-main.css"/>
<script src = "build/07-webpack-main.js"></script>
</head>
<body>
<div id = "component" class="component"></div>
</body>
</html>
浏览器运行html,第一行字灰色,第二行红色,第三行绿色
小结
css-loader将CSS变成JS
style-loader将JS样式插入head
ExtractTextPlugin将CSS从JS中提取出来
css modules 解决CSS命名冲突的问题
less-loader sass-loader各类预处理器
postcss-loader PostCSS处理