loaders:在webpack里面是一个很重要的功能 表示加载器、转换器
通常情况下,webpack只对js文件提供支持,但是比如说less/sass/css/ES7等就不认识了,这时候就需要使用loaders来帮助它转化了.
接下来聊聊CSS的处理吧
这时就需要借助style-loader和css-loader了
我们在src下建一个css目录,然后建一个a.css文件
//index.html
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root">aaaa</div>
</body>
//a.css
body {
background: #ccc;
}
我们在index.js文件里面引入a.css
// index.js
import './css/a.css';
处理css文件
这时是报错的,我们是要使用loader的,处理css文件我们需要使用到
1.安装style-load css-loader
cnpm i style-loader css-loader -D
2.配置
首先我们写一个module,在里面rules(规则),rules是一个数组,里面可以写一条一条的规则
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const Webpack = require('webpack');
module.exports = {
entry:{
entry: './src/index.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name]-bundle.js'
},
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:['style-loader','css-loader']
}
]
}, 这时候我们运行 npm run dev,我们发现css生效了.
上面我们使用的是use的写法,我们也可是使用loader的写法,效果是同样生效的
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
loader:['style-loader','css-loader'] 同时还有第三种写法,css-loader一定要放在后面,因为是先用css-loader在插入到style标签里面
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:[
{loader:'style-loader'},
{loader:'css-loader'}
] 总结loader的三种写法
1.use:['xxx-loader','xxx-loader']
2.loader:['style-loader','css-loader']
3.use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
一般简单的用第一种,涉及参数配置的用第三种
如何压缩js
打包完以后，JS需要压缩上线
1.在webpack4.x版本中
--mode production 表示生产环境,只要配置在package.json的script里面 js自动就压缩了
2.之前版本是如何做到的
使用uglifyjs-webpack-plugin
如果我们希望通过插件的形式压缩,那么我需要
1.安装
cnpm i uglifyjs-webpack-plugin -D
2.引入插件
const Uglify = require('uglifyjs-webpack-plugin'); 3.使用ugliufy()
-
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Webpack = require('webpack');
//onst Uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry:{
entry: './src/index.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name]-bundle.js'
},
module:{ //我写一个module
//配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
rules:[
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
},
devServer:{
contentBase:path.resolve(__dirname,'dist'), //最好设置成绝对路径
host:'localhost',
port:8090,
open:true,
hot:true
},
plugins:[
// Uglify是压缩js,现在已经不需要了,只需要在script里面写成
// "build": "webpack --mode production", 就自动压缩了
//new Uglify(),
