{
"name": "webpack-banner",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.5",
"babel-loader": "^8.2.2",
"css-loader": "^3.2.1",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^2.2.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@babel/runtime": "^7.13.10",
"axios": "^0.19.2",
"vue": "^2.6.12"
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
-------------------
let path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
MiniCssExtractPlugin = require("mini-css-extract-plugin"),
OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"),
UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
mode:"production",
entry:"./src/index.js",
output: {
filename:"bundle.min.[hash].js",
path: path.resolve(__dirname, 'dist')
},
devServer:{
port:3000,
contentBase: path.resolve(__dirname,'dist'),
progress: true,
open:true
},
optimization:{
minimizer:[
new OptimizeCssAssetsWebpackPlugin(),
new UglifyjsWebpackPlugin({
cache: true,
parallel: true,
sourceMap:true
})
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
}),
new MiniCssExtractPlugin({
filename:"bundle.min.[hash].css"
})
],
module:{
rules:[
{
test:/\.(css|less)$/i,
use:[MiniCssExtractPlugin.loader,"css-loader",{
loader:"postcss-loader",
options: {
ident:'postcss',
plugins: [require("autoprefixer")]
}
},"less-loader"]
},
{
test: /\.js$/i,
exclude:/node_modules/,
include:path.resolve(__dirname,'src'),
use:[
{
loader:"babel-loader",
options:{
presets:["@babel/preset-env"],
plugins:["@babel/plugin-transform-runtime"]
}
}
]
},
{
test: /\.(png|jpg|jpeg|gif|ico|webp|bmp)$/i,
use:[
{
loader:"url-loader",
options: {
limit: 100 * 1024,
outputPath:"/images"
}
}
]
},
{
test:/\.(html|xml|htm)$/i,
use:["html-withimg-loader"]
}
]
}
}
--------------------
/*
配置自定义打包规则
1 所有规则 都写在 module.exports = { } 中
*/
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 抽离 css 内容
let MiniCssExtractplugin = require('mini-css-extract-plugin');
// 压缩 css 代码
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩js
let UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
let webpack = require('webpack')
module.exports = {
// 配置 优化规则
optimization: {
// 设置压缩方式
minimizer:[
// 压缩css (产生的问题: js压缩不再执行自己默认的压缩方式,
// 也走的是这个插件，从而导致无法压缩)
new OptimizeCssAssetsWebpackPlugin(),
// 压缩 js
new UglifyjsWebpackPlugin({
cache: true, // 是否使用缓存
parallel: true, // 是否 是并发编译
sourceMap: true // 是否源码映射(方便调试)
})
]
},
// production -> 压缩模式 development
mode:'production',
// 入口
// entry:["@babel/polyfill","./src/index.js"],
entry: "./src/index.js",
// 出口
output:{
// 输出的目录必须是绝对路径
path: path.resolve(__dirname,'dist'),
// 输出的文件名 bunlid.min.[hash].js 让每一次生成的文件名都带着 hash值
filename:'js/bunlid.min.[hash].js',
// 给编译后 引用资源地址前面设置的前缀
publicPath:'./'
},
// 服务配置
devServer: {
// 端口号
// prot: 8082,
// // 显示打包编译进度状态
// progress: true,
// // 指定当前服务处理资源的目录
contentBase: path.resolve(__dirname,'dist'),
// // 编译完成自动打开浏览器
open:true,
historyApiFallback: true
},
// 使用数组
plugins:[
new HtmlWebpackPlugin({
// 自己定义的html 模板
template:'./src/index.html' ,
// 输出后的文件名
// filename:'index.[hash].html',
filename:'index.html',
// js后面加 hash（清除缓存）
// hash: true
// 控制压缩
minify:{
// 去除空格
collapseWhitespace: true, //删掉空格
removeComments: true, //删掉注释
removeAttributeQuotes: true, //干掉标签上的属性的引号
removeEmptyAttributes: true //干掉标签上的空属性
}
}),
new MiniCssExtractplugin({
// 指定输出的文件名
filename: 'css/main.min.css'
}),
// 向每个 模块中注入全局变量
new webpack.ProvidePlugin({
$: 'jquery'
})
],
// 使用加载器 loader 处理规则
module:{
rules:[
{
// 基于 正则匹配处理哪些文件
test:/\.(css|less)$/i,
// 控制器使用的 loader (有顺序的：从右到左编译)
use:[
// 把编译好的 css 插入到 页面的 head 中 （内嵌式）
// "style-loader",
// 把编译好的 css 插入到 页面的 head 中 (link 方式)
MiniCssExtractplugin.loader,
// 编译 @import/url() css 语法
"css-loader",
// 设置前缀
{
loader:"postcss-loader"
},
// 编译 less
{
loader:"less-loader",
options:{
importLoaders:1
}
}
]
},
{
test:/\.js$/i,
// 编译 js 的 loadber
use:[
{
loader:'babel-loader',
// options: {
// // 基于 babel 的语法解包 (es6-es5)
// presets:["@babel/preset-env"],
// // 基于插件处理 es6/es6 中class 的特殊语法
// plugins:[
// ["@babel/plugin-proposal-decorators",{
// "legacy":true
// }],
// ["@babel/plugin-proposal-class-properties",{
// "loose":true
// }],
// "@babel/plugin-transform-runtime"
// ]
// }
}
],
exclude:'/node_modules',
include:path.resolve(__dirname,'src')
},
{
test: /\.(png|jpg|jpeg|gif|ico|webp|bmp)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 1 * 1024,// => 只要图片小于200kb，一律转为base64
outputPath: 'images' //=> 图片放在images/下
}
},
// 'eslint-loader' //需要先安装eslint eslint-loader
]
},
{
//=> 处理html中引入的图片的地址
test:/\.(html|htm)$/i,
use:'html-withimg-loader',
}
]
}
}
