npm install babel-loader --save
cnpm i html-webpack-plugin --save
打包css资源类文件涉及的东西有很多,比如css/less/sass...本次案例涉及到的是css、less
因为涉及到css和less,所以需要的插件也多了一些
首先,下载相关依赖
yarn add css-loader -D
yarn add style-loader -D
yarn add less less-loader -D
yarn add mini-css-extract-plugin -D
yarn add optimize-css-assets-webpack-plugin -D
yarn add uglifyjs-webpack-plugin -D
一点点看,首先说loader,loader是什么?做什么的? 它就是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将A.sass或A.less转变为B.css,单纯的文件转换过程!
mini-css-extract-plugin 抽离css文件的作用
optimize-css-assets-webpack-plugin 压缩css(webpack4.x)的方法
用这些插件打包之后我们会发现,css的确被抽离和压缩打包了,但是js文件会变的无法压缩,所以需要下面这个插件进行js的压缩
uglifyjs-webpack-plugin 压缩js
代码敲起来!
ps>>要实现的功能:成功打包html文件、js文件、css文件、sass文件,将打包编译好的css文件输出到dist/css文件夹下,并且被dist/index.html引用
src目录下我们新建3个样式文件,分别为index.css/a.css/b.sass
//index.css
@import './a.css';
body:{
background:red;
}
//a.css
@import './b.less';
div:{
background:blue;
}
//b.less
h4:{
color:yellow
}
样式文件已经创建完毕,我们如何进行引用呢?这时候,我们可以使用require语法进行引用
//src/index.js
require('./index.css')
现在开始编写webpack.config.js主要逻辑
//webpack.config.js
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode:'development',
entry: './src/index.js',
output: {
filename:'bundle.js',
path: path.resolve(__dirname,'dist')
},
plugins: [
new MiniCssExtractPlugin({
filename:'css/main.css' //css的输出路径
}),
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
hash:true,
minify: {
collapseWhitespace:true
}
})
],
module: {
rules: [
{
test:/\.js$/,
use: {
loader:'bebel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-proposal-decorators',{'legacy':true}],
['@babel/plugin-proposal-class-properties',{'loose':true}]
]
}
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test:/\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
}
}
如此这般,这般如此之后,我们运行 npx webpack,就可以看到dist文件夹下就会有一个css的文件夹,里面有我们指定的,名字为main.css的文件,里面会有这些内容
body >h2 {
color :yellow;
}
div{
background: blue;
}
body{
background:red;
}
右键dist/index.html文件在浏览器打开,我们会发现这些样式已经全部都应用到了页面中...
至此,利用webpack成功的打包了js文件,html文件,css文件...