//webpack 是node写出来的node的写法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //抽离html
let MinCssExtractPlugin = require('mini-css-extract-plugin'); //抽离css
let TerserJSPlugin = require('terser-webpack-plugin'); //压缩js插件
let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //压缩css插件
let {CleanWebpackPlugin} = require('clean-webpack-plugin');// 清空 dist插件
let webpack = require('webpack');
module.exports = {
devServer: { //开发服务器的配置
hot: true,//热更新
port: 3000,
progress: true,
contentBase: './dist',
// open: true,//自动打开浏览器
},
optimization: { //优化项
minimizer: [
new TerserJSPlugin({}),
new OptimizeCss({}) //压缩css
]
},
mode: 'development', //模式 默认两张 production development
entry: './webpackSrc/src/index.js', //入口
//source-map 传说map文件 eval-source-map 不产生文件 cheap-module-source-map 不会产生列但是会有单独文件 cheap-module-eval-source-map
devtool: 'source-map',//源码映射 出错会标注位置
// watch: true,//实时监控打包
// watchOptions:{
// poll: 1000, //每秒问个
// aggregateTimeout: 500,//防抖
// ignored: /node_modules/
// },
output: {
filename: 'bundle.[hash:8].js', // 打包后的文件名
path: path.resolve(__dirname, "dist"), //路径必须是个绝对路径
// publicPath: 'https://baidu.com/',//统一给输出加路径
},
plugins: [ // 数组 放着所有的webpack插件
new webpack.DefinePlugin({
DEV: JSON.stringify('development'),//存全局变量 编译时区分开发模式
}),
new HtmlWebpackPlugin({
template: './webpackSrc/src/index.html',
filename: 'index.html',
minify: { //配置 压缩html
},
hash: true,
}),
new MinCssExtractPlugin({
filename: 'css/main.css'
}),
new webpack.ProvidePlugin({ //给每个模块默认注入一股￥
$: 'jquery'
}),
new webpack.NamedModulesPlugin(),//打印更新模块路径
new webpack.HotModuleReplacementPlugin(),//热更新插件
new CleanWebpackPlugin()
],
externals: { //排查打包第三方模块 index.html已引用的
jquery: '$'
},
module: { //模块
noParse: /jquery/,//不去解析jquery中的依赖库 优化webpack
//loader
rules: [
// {
// test: /\.js/,
// use:{
// loader: 'eslint-loader',//npm add eslint eslint-loader -D
// options: {
// enforce: 'pre' //强制优先执行
// }
// }
// },
{
test: /\.(png|jpe?g|gif)$/i,
//做一个限制 图片小于多少k 用base64转 否则就用file-loader
use: [{
loader: 'url-loader',
options: {
limit: 1,
outputPath: '/img/',//打包分类
// publicPath: 'https://baidu.com/',//统一给输出加路径
}
}, ],
},
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: { //用babel-loader 需要把es6>es5
presets: [
'@babel/preset-env'
],
plugins: [ //高等级js子插件
'@babel/plugin-proposal-class-properties'
]
}
},
include: [path.resolve(__dirname, 'src'),path.resolve(__dirname, 'webpackSrc')], //包括
exclude: /node_modules/, //剔除
},
//规则 css-loader 解析 @import这种语法
// style-loader 他是把css插入到headd 标签中
// loader的特点 希望单一
// loader的用法 字符串只用一个loader
//多个loader 需要[]
// loader的用法 的顺序 默认是从右向左执行 从下倒上
// loader还可以写成对象方式
{
test: /\.css$/,
use: [
MinCssExtractPlugin.loader,
'css-loader', // @import 解析路径
'postcss-loader', //增加浏览器前缀
]
},
{
test: /\.less$/,
use: [
MinCssExtractPlugin.loader, //抽离css
'css-loader',
'postcss-loader', //增加浏览器前缀
'less-loader' // 把less -> css
]
}
]
},
resolve: {//解析 第三方包 common
modules: [path.resolve('node_modules')],//指定第三方包路径
extensions:['.js','.css','.json'],//import 不写文件后缀事查找文件顺序
mainFields: ['style','main'],//主入口顺序
alias:{ //第三方别名
bootstapCss: 'bootstap/dist/css/bootstap.css',//import 'bootstapCss'
}
}
}
随时随地看视频
