上一篇:webpack大全---------(基础配置篇)----1.webpack的组成与介绍
webpack实例一:webpack中loader和plugins、devServer、mode的综合使用。
第一步:安装、创建配置。
yarn add webpack webpack-cli -D
yarn add webpack-dev-server -D //安装热服务,后面会讲解。
yarn add style-loader css-loader less-loader -D //处理css less需要的loader
yarn add html-webpack-plugin -D //打包生成html文件需要的第三方插件。
并且创建一个根目录下创建一个src目录,在里面创建几个文件:index.html、index.css、index.js、index.less、a.css并且在根目录下创建webpack.config.js配置文件:
pack.json文件中写入如下内容:
"scripts": {
"build": "webpack --config webpack.config.js", //表示默认的情况下 npm run build则启动这个命令。
"dev": "webpack-dev-server" //启动热服务的时候 npm run dev
},
ps:默认的情况下启动npx webpack,会去找webpack.config.js文件。
如果要传入其他配置文件进行启动的话,可以这么去实现(在npm中配置了):
npm run build – -- config 配置文件.
或者 npx webpack --config 配置文件的名称
第二步:写入内容。
a.css
body{
color: red;
}
index.css
@import "./a.css"; /*引入外部css文件*/
body{
background-color: red;
}
index.less
body{
div{
border: 1px solid #dadade;
}
}
index.js
require('./index.css');
require('./index.less');
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{ /*优先级比less和css的高*/
background-color: yellow;
}
</style>
<body>
<div id="div1">
</div>
</body>
</html>
webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { //开启服务配置(需要安装webpack-dev-server)
port:3000,
progress:true, //打包显示进度条
contentBase:'./dist' , //作为静态服务的目录
compress:true, //压缩
},
mode: "production", //还有一种production环境
entry:'./src/index.js',
output:{
filename: "bundle.[hash:8].js", //根据hash生成不同的打包后的文件,不会实现覆盖
//加上__dirname表示在当前目录下产生一个dist目录
path: path.resolve(__dirname,'dist'),
},
//当打包后的目录没有html的时候自动生成
plugins: [ //数组放置着所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //指定某个html模板
filename: 'index.html', //打包后的名字
minify: {
removeAttributeQuotes:true, //移出逗号
collapseWhitespace:true, //压缩html文件(去掉空格)
},
hash:true //增加哈希码
})
],
module: { //模块
rules: [ //规则 css-loader 解析@import 这种语法
//style-loader 作用把css插入到head的标签中
//loader的特点 希望单一
//loader的用法 字符串只用一个loader
//多个loader需要 []
//loader的顺序 默认是从右到左 从下到上
//loader还可以写成对象的方式
{
test:/\.css$/,
use:[
{
loader: "style-loader",
options:{
insertAt:'top' //插入的位置,顶部位置(后面自己写样式在html页面的时候,优先级就比这个高)
}
},
'css-loader'
]
},
{ //可以处理less文件 sass stylus node-sass sass-loader
// stylus stylus-loader
//此处需要安装less less-loader
test:/\.less$/,
use:[
{
loader: "style-loader",
options:{
insertAt:'top'
}
},
'css-loader', //@import 解析路径
'less-loader' //把less->css
]
}
]
}
};
第三部:执行并且分析打包后的结果。
npx webpack
打包成功:
浏览器中启动:观看优先级:
背景为黄色:说明打包成功,并且内联的css标签的优先级高。