一、webpack基础配置
1、webpack安装
一般会安装本地的webpack,我们要安装两个:webpack 和 webpack-cli。
在webpack4.0中,我们就需要安装webpack和webpack-cli。
// 先初始化
npm init -y
// -D表示开发依赖, 上线的时候不需要
npm install webpack webpack-cli -D
安装完之后,就可以进入webpack的配置。
2、webpack可以进行0配置
webpack是一个打包工具,可以把源码进行打包。
新建一个源码目录 src,在src目录新建文件index.js 。
console.log('hello');
那我们想把index.js这个文件进行打包,我们可以直接运行webpack的命令。
npx webpack
打包结果:
webpack会自动生成一个dist目录。
3、webpack支持js的模块化
我们可以在js文件中写js模块化的东西。
在src目录新建 a.js 和 index.js
a.js
module.exports = 'hello'
index.js
let str = require('./a.js')
console.log(str)
运行webpack
npx webpack
打包结果:
在dist目录中新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
直接用浏览器打开index.html,输出:hello。
4、手动配置webpack
默认配置文件的名字: webpack.config.js
在根目录新建 webpack.config.js文件
将dist目录删除掉,我们重新生成一下。
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
module.exports = {
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'development',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
filename: 'bundle.js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
}
}
然后,运行 npx webpack
打包结果:
5、可以指定默认的配置文件
可以更改默认配置文件的名字,比如写的 webpack.config.my.js
npx webpack --config webpack.config.my.js
也可以在package.json里面配置运行脚本
"scripts": {
"build": "webpack --config webpack.config.my.js"
},
npm run build
就相当于执行
npx webpack --config webpack.config.my.js
二、webpack打包出的文件解析
三、Html插件
我们希望在dist目录生成一个bundle.js文件的同时,也生成一个html文件。
1、webpack-dev-server
webpack-dev-server是webpack的开发服务器
先安装webpack-dev-server:
npm install webpack-dev-server -D
在dist目录下,新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
然后运行:
npx webpack-dev-server
会生成一个内存中的打包。
在webpack.config.js中对开发服务器进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'development',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
filename: 'bundle.js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
}
}
也可以在package.json中配置运行:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
运行开发服务器:
npm run dev
浏览器打开:
http://localhost:3000/
2、Html插件
我们希望在打包的时候,自动生成html文件。
在src目录,新建index.html。
我们希望把src/index.js,放到src/index.html中,并且把打包结果放到dist目录下。
我们需要使用一个插件:html-webpack-plugin
安装:
npm install html-webpack-plugin -D
在webpack.config.js中引用:
let HtmlWebpackPlugin = require('html-webpack-plugin');
在webpack.config.js中进行插件的配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的bundle.js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
})
]
}
然后运行打包的命令:
npm run build
四、样式处理(1)
loader的作用,是可以把我们的源码进行转化。
1、安装
npm install style-loader css-loader -D
在src目录,新建a.css文件。
body {
color: blue;
}
在src目录,新建index.css文件。
@import './a.css';
body {
background: #c00;
}
在index.js中引入css文件。
let str = require('./a.js')
console.log(str)
require('./index.css')
还有index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 自己写的样式 */
body {
background: pink;
}
</style>
</head>
<body>
<!-- 模板 -->
</body>
</html>
在webpack.config.js中配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/, use: [{
loader: 'style-loader',
options: {
// 将打包后的样式插入到页面顶部
insertAt: 'top'
}
}, 'css-loader']
}
]
}
}
运行:
npm run dev
打包后的结果:
页面背景变粉!使用了自己写的样式。
2、还可以处理less文件。
安装:
npm install less less-loader -D
在src目录新建index.less文件。
body {
div {
border: 1px solid #dadade;
}
}
在index.js中引入index.less。
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
然后在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/, use: [{
loader: 'style-loader',
options: {
// 将打包后的样式插入到页面顶部
insertAt: 'top'
}
}, 'css-loader']
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
]
}
}
运行:
npm run dev
3、还可以处理scss文件。
Sass 和 Scss 有什么区别?
Sass 和 Scss其实是同一种东西,我们平时都称之为Sass,两者之间不同之处有以下两点:
(1) 文件扩展名不同,Sass 是以 ".sass" 后缀为扩展名,而SCSS是以".scss"后缀为扩展名。
(2) 语法书写方式不同, Sass是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而SCSS的语法书写和我们的CSS语法书写方式非常类似。
先来看一个示例:
Sass语法:
$font-stack: Helvetica, sans-serif // 定义变量
$primary-color: #333 // 定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS语法:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力。
语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号:
// sass太费眼了
.father
width:100px;
.son
width:50px;
// scss
.father {
width: 100px;
.son {
width: 50px;
}
}
补充:
在vue中使用scss:
安装:
npm install node-sass sass-loader -D
webpack.base.conf.js文件:
module: {
{
// 手动添加这一条,相当于是编译识别sass!
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
}
在.vue文件中使用:
<style scoped lang="scss">
.box {
width: 100%;
:hover {
color: red;
}
}
</style>
在webpack4.0中处理scss文件:
安装:
npm install node-sass sass-loader -D
在index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: pink;
}
</style>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
</body>
</html>
在src目录新建index.scss文件:
.scss {
color: blue;
background: #F1F1FA;
}
在index.js中引入index.scss文件:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/, use: [{
loader: 'style-loader',
options: {
// 将打包后的样式插入到页面顶部
insertAt: 'top'
}
}, 'css-loader']
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'sass-loader' // 把scss转变为css
]
}
]
}
}
运行:
npm run dev
4、还可以处理stylus
安装:
npm install stylus stylus-loader -D
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: pink;
}
</style>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
<div class="stylus">stylus</div>
</body>
</html>
在src目录新建index.styl:
.stylus {
color: yellow;
}
在index.js中引入:
let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/, use: [{
loader: 'style-loader',
options: {
// 将打包后的样式插入到页面顶部
insertAt: 'top'
}
}, 'css-loader']
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'sass-loader' // 把scss转变为css
]
},
{
// 找到所有的.styl文件
test: /\.styl$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // 解析 @import这种语法的
'stylus-loader' // 把stylus转变为css
]
}
]
}
}
运行:
npm run dev
五、样式处理(2)
目前这些样式都是插入到html的头部。
能不能把这些css样式给抽离出来呢。
安装:
npm install mini-css-extract-plugin -D
在webpack.config.js中进行配置:
运行:
npm run build
打包结果:
会单独抽离成一个css文件,叫main.css。
然后,less和scss,以及stylus文件的样式,都会打包进这个css文件。
main.css:
body {
color: blue;
}
body {
background: #c00;
}
body div {
border: 1px solid #dadade;
}
.scss {
color: blue;
background: #F1F1FA; }
.stylus {
color: #ff0;
}
2、可以自动添加前缀
比如: CSS3语法,transform,需要自动给它添加前缀。
安装:
npm install postcss-loader autoprefixer -D
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽离出来的文件叫 main.css
filename: 'main.css',
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/,
use: [
// 把样式都抽离成一个单独的css文件,叫main.css
MiniCssExtractPlugin.loader,
// 给CSS3语法,比如transfrom加上前缀。
// 需要新建 postcss.config.js 配置文件
// 需要引用 autoprefixer 这个插件
'css-loader',
'postcss-loader'
]
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'sass-loader' // 把scss转变为css
]
},
{
// 找到所有的.styl文件
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'stylus-loader' // 把stylus转变为css
]
}
]
}
}
postcss-loader要写在css-loader的下面,因为要先执行 postcss-loader ,再执行css-loader。
postcss-loader 需要一个配置文件 postcss.config.js 。
在src目录新建postcss.config.js文件:
module.exports = {
// 需要用到 autoprefixer插件
plugins: [require('autoprefixer')]
}
src目录的index.scss:
.scss {
color: blue;
background: #F1F1FA;
transform: rotate(45deg);
}
运行:
npm run build
打包结果:
main.css里面就成功给CSS3语法加上前缀了。
body {
color: blue;
}
body {
background: #c00;
}
body div {
border: 1px solid #dadade;
}
.scss {
color: blue;
background: #F1F1FA;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.stylus {
color: #ff0;
}
3、把抽离出来的main.css进行压缩。
目前抽离出来的main.css是这样的:
main.css:
body {
color: blue;
}
body {
background: #c00;
}
body div {
border: 1px solid #dadade;
}
.scss {
color: blue;
background: #F1F1FA;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.stylus {
color: #ff0;
}
我们希望把它压缩一下:
需要一个插件 optimize-css-assets-webpack-plugin。
安装:
npm install optimize-css-assets-webpack-plugin -D
如果用到了 optimize-css-assets-webpack-plugin 插件,那么就必须用到uglifyjs-webpack-plugin,否则只会对main.css进行压缩,而生成的bundle.js则不会压缩。
安装:
npm install uglifyjs-webpack-plugin -D
在webpack.config.js中进行配置:
// webpack是node写出来的 node的写法
//path是node的内置模块,所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
// 对单独抽离出来的main.css进行压缩时,
// 使用到了optimize-css-assets-webpack-plugin插件
// 因此需要加一个优化项配置
optimization: {
minimizer: [
// 对生成的bundle.js进行压缩
new UglifyJsPlugin({
cache: true,
// 并发打包,一起压缩多个。
parallel: true,
sourceMap: true
}),
// 对抽离出来的main.css进行压缩
new OptimizeCSSAssetsPlugin({})
]
},
devServer: { // 开发服务器的配置
port: 3000,
progress: true, // 编译的进度条
contentBase: './dist', // 以dist目录为默认启动目录
compress: true, // 自动压缩
open: true // 自动打开浏览器,适合懒人
},
// 模式:默认有两种,一种叫生产环境production, 一种叫 development
// production 是经过压缩过的
// 所以,我们选择 development模式,可以看清打包后的代码
mode: 'production',
entry: './src/index.js', // 入口文件,也就是打包这个js文件
// 打包的文件位置
output: {
// 当js文件更改, [hash]的值会变化,每次build会生成一个新的js文件
// [hash:8],只显示8位的hash值
filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
// resolve() 可以把相对路径解析成绝对路径
// __dirname 是当前目录
path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
},
// 数组 放着所有的webpack插件
plugins: [
// 因为HtmlWebpackPlugin是一个类,所以使用的时候new一下
new HtmlWebpackPlugin({
template: './src/index.html', // 使用哪个html模板
filename: 'index.html', // 打包后也叫做 index.html
// 压缩这个html文件(主要是对HTML文件进行压缩)
minify: {
// 删除这个html文件的双引号
removeAttributeQuotes: true,
// 变成一行
collapseWhitespace: true
},
// 加一个hash戳
hash: true
}),
new MiniCssExtractPlugin({
// 抽离出来的文件叫 main.css
filename: 'main.css',
})
],
module: { // 模块
rules: [ // 规则,需要css-loader, 可以处理css文件
// css-loader 主要用来解析 @import这种语法的
// 还需要style-loader,它是把css插入到head的标签中
// loader的用法, 多个loader需要一个数组
// loader是有顺序的,默认是从右向左执行
// loader还可以写成 对象方式
{
test: /\.css$/,
use: [
// 把样式都抽离成一个单独的css文件,叫main.css
MiniCssExtractPlugin.loader,
// 给CSS3语法,比如transfrom加上前缀。
// 需要新建 postcss.config.js 配置文件
// 需要引用 autoprefixer 这个插件
'css-loader',
'postcss-loader'
]
},
// 还可以处理less文件
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'less-loader' // 把less转变为css
]
},
// 还可能处理 sass stylus,
// sass 要安装的包 node-sass sass-loader
// stylus 要安装的包 stylus stylus-loader
{
// 找到所有的scss文件
test: /\.scss$/,
// 用的loader统一是sass-loader,sass和scss用的都是sass-loader
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'sass-loader' // 把scss转变为css
]
},
{
// 找到所有的.styl文件
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', // 解析 @import这种语法的
'postcss-loader',
'stylus-loader' // 把stylus转变为css
]
}
]
}
}
入口文件,src/index.js:
// let str = require('./a.js')
// console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')
运行:
npm run build
打包结果:
main.css 和 bundle.js 都实现了压缩。