webpack 简单介绍

webpack在配置文件：webpack.base..conf.js中将模块分为几大块，主要分为 ：entry/output/module/plugins

modules.export={
    entry:{
        /* 入口文件 */
    },
    output:{
        /* 出口文件 */
    },
    module:{
        /* Loader less、sass、vue、es6等转化*/
        rules:[{},{},{}]
    },
    plugins:[ 
        /* 插件 */ 
    ],
}

1. entry----入口文件
   入口文件：Webpack 会递归的探索出 入口文件中所依赖的模块，并按照顺序 利用 Loader 进行处理，常用的3种格式

// 单入口文件
entry: "app.js"
//多入口文件
entry: ["app.js", "main.js"];
// 对象形式的多入口文件
entry: {
  app: "./src/js/app.js",
  main: "./src/js/main.js"
}

2.output --- 出口文件
出口文件： webpack打包后文件的具体配置，主要用于build之后版本

// 打包后的文件路径 ，通常会从 config配置文件中取build配置下的 assetsRoot 
//assetsRoot: path.resolve(__dirname, '../dist'),
path: config.build.assetsRoot 
// 打包后文件的名字 
//1.[name].js 以入口文件名
// 2.[hash].js 以打包后的hash值
// 3.[chunkhash] 以改模块打包后的哈希值
filename: '[name].js',
// 上线时的公共路径，主要应用于线上 通常是 '/'
 publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
// 按需加载模块事输出的文件名称
chunkFilename: 'js/[name].js'

3.loader --- 编译转化
loader： 将一切浏览器不支持的语言，处理成 浏览器可以支持。

// 基本结构
module:{
    rules:[
        {
            test:/\.xxx$/,//以xxx结尾的文件
            loader: "xxx-loader", // 用于处理转化的工具
            exclude: {排除的路径}, // 这些路径下的文件不做处理
            include: {包含的路径},// 对该路径下的内容进行转化
            options: {Loader配置} // 接口参数配置
        }
    ]
}

4. plugins -- 插件
   插件：我们使用 Loader 处理不同类型的文件，当有某种其他方面的需求时，比如 抽离 CSS 、生成多页面 HTML

plugins:[
//主要用于压缩文件
new UglifyJsPlugin({/*options*/});
//用于拷贝文件 主要用于拷贝static静态文件
new CopyWebpackPlugin({/*options*/})
// 热更新插件
new webpack.HotModuleReplacementPlugin()
//  主要用于生成HTML，可以规定 模板HTML，也可以为 模板传入参数，压缩文件等
 new htmlWebpackPlugin({//打包后的文件名
filename: "index.html",
//模板
template: "index.html",
//为true自动生成script标签添加到html中
//或者写 body/head 标签名
inject: false,//js的注入标签
//通过<%= htmlWebpackPlugin.options.title %>引用
title: "参数title",
//通过<%= htmlWebpackPlugin.options.date %> 引用
date: new Date()
//网站的图标
favicon: 'path/to/yourfile.ico'
//生成此次打包的hash
//如果文件名中有哈希，便代表有 合理的缓冲
hash: true,
//排除的块
excludeChunks: [''],
//选中的块 与入口文件相关
chunks: ['app','people'],
//压缩
minify:{
removeComments: true,collapseWhitespace: true,
minifyJS: true, minifyCSS: true,minifyURLs: true,
}
}) ]

转自：https://www.cnblogs.com/Leo_wl/p/8033738.html