webpack简单入门（二）
一、生成简单页面（使用插件html-webpack-plugin）
1.插件介绍
此插件用于简单创建HTML文件，用于服务器访问
2.安装插件
npm i -D html-webpack-plugin
安装后可在node_modules找到此插件
3.引入插件
在webpack.config.js中进行配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: "./src/main.js"
output: {
path: path.resolve(__dirname,"dist"),
filename: 'main.bundle.js',
},
plugins: [ //这里是一个数组
new HtmlWebpackPlugin()
]
};
配置完成并打包后，可以在dist文件下看到index.html，index.html中会自动引入app.bundle.js
4.其他配置
plugins:[
new HtmlWebpackPlugin({
title: "Example Title",
filename: "index.html", //不写时默认为index.html
//带目录 :"[name]/index.html"
inject:'body', //引入模块的注入位置；取值有true/false/body/head
template: "./src/template.html", //模板来源
minify:{
removeComments:true, //去掉html中的注释
collapseWhitespace: true //去掉html中的空白符和换行符
}
})
]
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 注释-->
<div></div>
</body>
</html>
<title><%= htmlWebpackPlugin.options.title %></title>
补充——快捷执行
根目录下进入package.json，在属性scripts添加
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev" : "webpack --mode development",
"build" : "webpack --mode production "
}
如果有其他需求可继续往后添加参数，如：
"build": "webpack --config ./webpack.config.js --mode production"
配置完成后，用npm run [script name]
D:\webpack_test> npm run build
如果[scirpt name] 为start，可以直接npm start
D:\webpack_test> npm start
二、css、less、sass的处理
css
1.安装模块
npm i -D css-loader style-loader
css-loader : 用于解释@import 和 url();style-loader : 将 JS 字符串生成为 style 节点
2.样式文件准备
在src下创建style.css
body{
background:blue;
}
3.引入文件
在app.js中引入
import css from './style.css'
4.配置webpack.config.js
module.exports = {
...
plugins:[...],
module: {
rules:[ //rules是一个数组，里面每个对象作为一条处理规则
{
test: /\.css$/,
use: ["style-loader","css-loader"]
//执行顺序从右往左，先识别处理css文件，再处理样式
}
]
}
}
浏览器打开打包发布后的index.html可以看到样式已经注入
Less 和 Sass
1.安装模块
npm i -D less-loader less
npm i -D sass-loader node-sass
2.文件准备
src下建立style2.less
@green:#693;
body{
div{
width:200px;
height:200px;
background-color:@green;
}
}
建立style3.scss
body{
background:#efb2b2;
}
3.app.js引入文件
require('./style2.less'); //也可用import引入
require('./style3.scss');
4.配置webpack.config.js
module.exports = {
...
module: {
rules:[
{
test: /\.css$/,
use: ["style-loader","css-loader"]
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}
},
//另一种写法
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
}
]
}
}
5.运行
npm run build
三、分离css（使用插件extract-text-webpack-plugin）
1.插件介绍
将所有的入口中应用的*.css移动到独立分离的CSS文件，不在内嵌到JS bundle中
2.安装插件
npm -i -D extract-text-webpack-[email protected] //安装4.0版本的插件，后面会展示旧版本出现的问题
3.配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //引入
module.exports = {
mode: 'development',
entry: {
app: './src/app.js',
},
output:{
path:path.resolve(__dirname,'dist'),
filename : '[name].bundle.js'
},
module:{
rules:[
{test: /\.css$/,use: ["style-loader","css-loader"] },
{test: /\.scss$/,loader: "style-loader!css-loader!sass-loader"},
{ //以style2.less为例
test: /.\less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:['css-loader','less-loader']
})
}
]
},
plugins:[
new HtmlWebpackPlugin({
title:'Examplt Title',
filename:'index.html',
template: './src/template.html'
}),
new ExtractTextPlugin.extract('index.css')
// 也可为多级目录，不存在目录文件夹就会自动创建，如./css/index.css
],
}
4.npm run build
dist目录下会生成一个index.css
对比：
/*style2.less*/
@green:#693;
body{
div{
width:200px;
height:200px;
margin:50 auto 0;
border:1px;
background-color:@green;
}
}
/*index.css*/
body div {
width: 200px;
height: 200px;
margin: 50 auto 0;
border: 1px;
background-color: #693;
}
前面提到要安装最新版4.0的插件，如果使用
npm i -D extract-text-webpack-plugin
则安装的是3.0版本，打包时会出现以下错误
上一篇： python多版本控制
下一篇： 简单入门配置webpack