let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let cleanWebpackPlugin = require('clean-webpack-plugin');
let copyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack')
//1) cleanWebpackPlugin (清除文件插件)
//2) copyWebpackPlugin (复制文件插件)
//3) bannerPlugin 内置的webpack上带的(版权声明插件)
module.exports = {
//多入口
mode: "production",
entry: {
index: './src/index.js',
},
output: {
//[name] home,other对应要打包的js名
filename: "[name].js",
path: path.resolve(__dirname, 'dist'),
},
//devtool: 'source-map',//源码映射,可以帮助我们调试源代码 会单独生成一个sourcemap文件 出错了会标识当前报错的列和行
// devtool: 'eval-source-map',//报错会显示行和列但是不会生成map文件
// devtool: 'cheap-module-source-map', //不会产生列 但是是一个单独的映射文件,产生后你可以保留起来用于调试
//devtool: 'cheap-module-eval-source-map',//不会生成文件 集成在打包后的文件中 ,会有行的报错,不会有列的报错
devServer: {
port: "3000",
progress: true,//如果为 true ,开启虚拟服务器时,为你的代码进行压缩。加快开发流程和优化的作用。
contentBase: path.join(__dirname, "dist"),//此处最好是绝对路径
},
// watch: true,
// watchOptions: {//监控的选项
// poll: 1000,//每秒问我1000次
// aggregateTimeout: 500,//防抖 我一直输入代码
// ignored: /node_modules/,//不需要进行监控哪个文件
// },
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['index']
}),
new cleanWebpackPlugin('./dist'),
new copyWebpackPlugin([
{from: './doc', to: './'}
]),
new webpack.BannerPlugin("版权归我所有")
]
}
webpack4.0 小插件 clean-webpack-plugin copy-webpack-plugin webpack.BannerPlugin的使用
最新推荐文章于 2023-05-25 13:54:13 发布