webpack基础配置

1.出入口

// 三种方式
// entry: './src/main.js',
entry: path.resolve(__dirname, '../src/main.js'), //推荐
// entry: {
//     app: './src/main.js'
// },
    

output: {
    // 打包到哪里
    // 0.0 配置出口的时候必须使用绝对路径
    path: path.resolve(__dirname, '../dist'),
    // 打包后的名字  bundle（一束、一捆）
    // filename: 'bundle.js',
    // 格式化名字


   // [chunkhash] 生成hash字符串的方式:每次打包，webpack根据当前chunk进行计算，如果发现有代码 变化，
   // 就生成新的hash名;如果当前chunk没有代码变化，生成的hash名和上一次一样。
   filename: 'js/[name].[chunkhash].js',
   // 自动清除dist目录

   // v4 使用 clean-webpack- plugin
   clean: true

},

2.plugins

// 所有的webpack plugin 都是class类
// 插件:是webpack中些用于扩展的小插件
plugins: [ 
    // 把 webpack 编译的 js 代码和 html 组合起来
    new HtmlWebpackPlugin({
    // 自定义title
    title: 'DP7',
    template: path.resolve(__dirname, '../public/index.html'),
    // 打包后的名字
    filename: 'index.html',


    inject: 'body',
    favicon: path.resolve(__dirname, '../public/favicon.ico')
	}),
    // 进度条
    new webpack.ProgressPlugin(),
],

3.module

// loaders用于加载各种各样的文件模块，并使用相应的编译器对这些模块进行编译
// module 配置对各种各样的模块进行编译的规则=> loaders

// 官方说法：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript
    module: {
        rules: [
            //第一条规则: 当webpack运行时， 如果遇到以.js / .ts为后缀的文件时， 
            // webpack 就使用babel - loader来加载这种文件 然后交给Babel编译器(@babel/core、 @babel/preset -env)进行编译转换，最终得到ES5代码。
            // 同理 
            {
                // .js 或者 .ts 结尾
                test: /\.(js|ts)$/,
                // 使用Babel加载ES2015+代码并将其转换为ES5
                use: ['babel-loader']
            },
            {
                test: /\.vue$/,
                use: ['vue@loader']
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }

1.html-webpack-plugin

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle(js文件)

//demo
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  // 把解析后的js文件  进入到html文件中
  plugins: [new HtmlWebpackPlugin()],
};

2.terser-webpack-plugin

最小化你的js代码 进行压缩 （用于生产环境）

optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
}

3.devtool

选择一种 source map 格式来增强调试过程