webpack基本打包插件使用
webpack 初始化
- 安裝webpack
npm i webpack webpack-cli -D
- 安裝webpack開發服務器插件
npm i webpack-dev-server -D
- 設置自定義config文件和npm運行命令
// package.json
{tr
"name": "webpack4_s",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.my.config.js",
"dev": "webpack-dev-server --config webpack.my.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
- 配置 mode entry output devServer
/* ------------webpack.my.config.js------------ */
const path = require('path');
/* 導出配置 */
module.exports = {
mode: 'development',//模式
entry: './src/index.js',//入口
output: {//出口
//打包文件名 中間八位隨機生成 bundle.7f921d2c.js
filename: 'bundle.[hash:8].js',
//打包出口的絕對路徑
path: path.resolve('./build')
},
devServer: {
contentBase: './build',//服務器根路徑
port: 8888,//端口
compress: true,//開啓gzip壓縮
hot: true,//熱更新，文件改變保存會觸發編譯
}
}
實現html文件打包
安裝相關插件
npm i html-webpack-plugin clean-webpack-plugin html-withimg-loader -D
1.引入方式
/* 刪除build目錄舊文件 */
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
/* 打包html */
const HtmlWebpackPlugin = require('html-webpack-plugin');
2.作爲plugin使用
plugins: [
// 刪除舊文件
new CleanWebpackPlugin(),
//打包html
new HtmlWebpackPlugin({
title: '首頁',//通過ejs模板可以渲染到html
filename: 'index.html',//打包生產文件名
template: './src/index.html',//打包html模板
hash: true,//js引入加入hash bundle.7f921d2c.js?23de33ee2323
})
]
3.效果
<!-- 打包模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">666</div>
</body>
</html>
<!-- 生成html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首頁</title>
</head>
<body>
<div id="app">666</div>
<script src="bundle.c4e05e95.js?c4e05e9530cf5a369b9d"></script>
</body>
</html>
Css,Less文件處理
1.編譯打包css,less到js
安裝插件
npm i style-loader css-loader less less-loader -D
配置
module: {
/* rules裏面內容執行順序從下往上，從右向左 */
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}, {
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
引入css/less進行打包的方式
/* ---------index.js--------- */
//引入css和less
import './index.css';
import './index.less';
2.打包成css文件到指定目錄
安裝插件
npm i mini-css-extract-plugin -D
引入方式
/* 打包到css/目錄 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
使用方式
rules中將所有'style-loader'替換爲MiniCssExtractPlugin.loader
plugins加入一條 new MiniCssExtractPlugin({ filename: 'css/bundle.css' })
3.給transform等樣式類型加入前綴
安裝插件
npm i postcss-loader autoprefixer -D
使用方式
/* ---------webpack.my.config.js--------- */
rules: [
{
test: /\.css$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',//加載插件
options: {
plugins: [require('autoprefixer')]//引用加前綴插件
}
}
]
}, {
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
}
]
/* -------------package.json------------- */
// 標識瀏覽器
"browserslist": [
"defaults",
"not ie <= 8",
"last 2 versions",
"> 1%",
"iOS >= 7",
"Android >= 4.0"
]
效果
/* index.css */
#app{
border:2px solid mediumseagreen;
transform: rotate(-5deg);
}
/* index.less */
body{
background-color: wheat;
#app{
font-size: 50px;
color:green;
}
}
/* 生成的bundle.css */
#app{
border:2px solid mediumseagreen;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
body {
background-color: wheat;
}
body #app {
font-size: 50px;
color: green;
}
4.優化
實現生產環境css壓縮打包
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
js文件打包
1.ES6語法轉換爲ES5
npm i babel-loader @babel/core @babel/preset-env -D
使用方式
//添加的rule
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
}
輸出文件對比
使用插件前
let fn = (str) => {\r\n console.log(str);\r\n}
使用插件後
var fn = function fn(str) {\n console.log(str);\n};
2.增加對class和裝飾類的支持以及補充低版本瀏覽器缺少的api
@babel/plugin-proposal-decorators
@babel/plugin-proposal-class-properties
@babel/plugin-transform-runtime
@babel/runtime --save 上線需要的補丁
@babel/polyfill --save 直接require引入的包
使用方式
//修改之前的rule爲：
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: [{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
],
plugins: [
['@babel/plugin-proposal-decorators', { 'legacy': true }],//裝飾類
['@babel/plugin-proposal-class-properties', { 'loose': true }],//類
'@babel/plugin-transform-runtime'
]
}
}]
}
效果
/* ----------index.js---------- */
// 使用類和裝飾類
@log
class A {
a = 1;
}
let a = new A();
console.log(a.a);
function log(target) {
console.log(target);
}
/* 打包後的文件 */
var A = log(_class = (_temp = function A() {\n _babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, A);\n\n this.a = 1;\n}, _temp)) || _class;\n\nvar a = new A();\nconsole.log(a.a);\n\nfunction log(target) {\n console.log(target);\n}
多頁面自定義打包
module.exports = {
mode: 'development',
entry: {
a: './src/a.js',
b: './src/b.js'
},
output: {
filename: '[name].[hash:8].js',
path: path.resolve('./build')
},
plugins: [
/* 自定義輸出html */
new HtmlWebpackPlugin({
title: 'a',
filename: 'a.html',/* 輸出文件名 */
template: './src/index.html',
chunks: ['a']/* 需要導入的js */
}),
new HtmlWebpackPlugin({
title: 'b',
filename: 'b.html',
template: './src/index.html',
chunks: ['b']
})
]
}
圖片引入
文件引入 使用url-loader,file-loader處理
html圖片路徑處理 html-withimg-loader處理
使用方式：增加兩個rule
{
test: /\.(jpg|png|gif|)$/,
use: [{
loader: 'url-loader',
options: {
limit: 200*1024,//小於200k用base64轉化
outputPath: 'images/',
esModule: false,/* 解決圖片路徑爲default */
// publicPath: "http://www.xxx.com"/* 設置圖片域名 */
}
}]
}, {
test: /\.html$/,
use: 'html-withimg-loader'
}
效果
/* index.js */
import imgFile from './1.jpg';
let img = new Image(200, 300);
img.src = imgFile;
document.body.appendChild(img);
/* index.html */
<div id="app">666</div>
<img src="./1.jpg" alt="直接寫在html的圖片">
/* 打包結果 */
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href="css/bundle.css?35d8506e121620c96075" rel="stylesheet"></head>
<body>
<div id="app">666</div>
<img src="images/3667f5d46b7893c97ec4dc0f6223c803.jpg" alt="直接寫在html的圖片">
<script src="bundle.35d8506e.js?35d8506e121620c96075"></script></body>
</html>