webpack基础配置

前端_七月

已于 2022-06-24 16:14:52 修改

阅读量644

点赞数

分类专栏： webpack 文章标签： webpack

于 2021-04-02 19:03:04 首次发布

本文链接：https://blog.csdn.net/weixin_41319237/article/details/115406325

版权

本文主要介绍webpack的基础配置，通过示例代码详细解析如何设置webpack配置文件，包括入口(entry)、输出(output)、模块处理(module)、插件(plugins)等关键配置项，帮助初学者快速理解并掌握webpack的使用。

摘要由CSDN通过智能技术生成

直接上代码：



const path = require('path');

// 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，
// 防止引用缓存的外部文件问题

// 可以生成创建html入口文件，
// 比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

// 注意版本问题（ TypeError: Cannot read property 'tap' of undefined at HtmlWebpackPlugin）


const htmlWebpackplugin = require('html-webpack-plugin');

// 配合vue-loader使用. 起步 | Vue Loader%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

const VueLoaderPlugin = require('vue-loader/lib/plugin');

// -----------------------------------start-----------------------------------------------------

// 通过 Plugin 将注入 bundle.js 文件里的css 提取到单独的文件中，

// extract-text-webpack-plugin(默认v3.0.2)还不能支持webpack4.0.0以上的版本

// const ExtractTextPlugin = require ('extract-text-webpack-plugin') ;

// webpack4.0.0以上使用mini-css-extract-plugin,


// 文档地址：MiniCssExtractPlugin | webpack 中文文档

const MiniCssExtractPlugin = require('mini-css-extract-plugin');



 ------------------------------------end----------------------------------------------------

module.exports = {

  // 设置webpack启动时的工作目录，默认是项目根目录，必须是绝对路径的字符串

  context: path.resolve(__dirname, ''),

  // ---------------------------------entry start ------------------------------

  // chunk: webpack会为每个生成的chunk取名，chunk名称和entry有关

  // entry为string、Array，chunk的名字是main,如果为Object，名字为key

  entry: './src/main.js',//1个入口，一个入口文件

  // entry:['./src/entry1', './src/entry2'],//只有1个入口，入口只有2个文件

  // entry:{

  //   a: './src/entry-a',

  //   b: ['./src/entry-b1', './app/entry-b2']

  // },//有两个入口

  // // 动态配置

  // // 假如要动态的为每个页面的入口配置一个entry,这些页面的数量会动态增加

  // // 同步

  // entry: ()=>{

  //   //........

  //   return {

  //     a: './pages/a',

  //     b: './pages/b'

  //   }

  // },

  // // 异步

  // entry: ()=>{

  //   // .........

  //   return new Promise((resolve)=>{

  //     resolve({

  //       a: './pages/a',

  //       b: './pages/b'

  //     })

  //   })

  // },

  // ---------------------------------entry end ------------------------------

  //-----------------------output start------------------------------------

    output: {

        // 只有一个输出文件，将所有依赖的模块合并输出到一个 bundle.js 文件中

    filename:'bundle.js',

    // 多个chunk

    // filename: `[name]_[chunkhash:8].js`,// webpack为chunk生成的名字（内置变量：id、hash、name、chunkhash,hash、chunkhash可以指定长度，默认20位）

    // 将输出文件都放到 dist 目录下

    // chunkFilename: '',// 无入口的chunk在输出时的文件名称，

    path: path.resolve(__dirname, './dist'),//绝对路径

    // 线上的文件访问：<script src="https//cdn.example.com／a_12345678.js"></script>

    // publicPath: 'https//cdn.example.com／',//配置发布到线上资源的url前缀，相对路径

    // 通常用来获取异步加载脚本时的详细错误信息

    // crossOriginLoading: '',//配置异步插入的js文件的crossorigin(anonymous[默认加载此脚本不带用户的cookies] 、use-credentials[带用户cookies])

    // 导出库的名称为string 类型

    // 不填它时，默认的输出格式是匿名的立即执行函数

    // library:'MyLibrary',

    // 导出库的类型，为枚举类型，默认是 var

    // 可以是 umd umd2 commonjs2 commonjs amd this var assign window global jsonp

    // libraryTarget: 'umd',

    //是否包含有用的文件路径信息到生成的代码里 ，为 boolean 类型

    // webpack 在 bundle 中引入「所包含模块信息」的相关注释

    pathinfo: true,

  },

  //-----------------------output end-------------