webpack常用配置及基本概念

1.基本概念:

配置方式:如果没有创建webpack.config.js或指定mode (production/development)会直接打包压缩生产模式。webpack配置文件的默认名称:webpack.config.js / webpackfile.js 一般选前一种

(1)入口entry/出口output:

entry可多入口,可构建多页面应用，设计多个html文件在根目录来一并打包实现;

output:单出口,如果是多页面用'[name].js',代表各个入口文件名

可以在webpack脚本中编写额外的代码来动态通过命令行参数修改entry/output构建定制化的打包逻辑

(2)loader:webpack默认只将JS文件模块化,loader可以将其他文件模块化导入

处理所有非js文件都支持import导入

loader支持链式传递

(3)plugin插件:执行更多包括工具、打包压缩、环境的任务

插件是构造函数，使用时需要new一个对象

2.核心配置

let path = require('path');

export default {

      // 设置process.NODE_ENV的值为production或development,并启用相应模式下的插件

      mode: 'production',

      // 指定entry和output基础目录，分离配置文件用

      context:path.resolve('../src'), 

      // 路径相关配置

      resolve: {

            // import 导入不带后缀名优先级

            extensions: ['.js', '.vue', '.json'],

            // 路径简写代理

            alias: { 

                  '@': '../src'

            },

            // 第三方代码目录  默认node_modules

            modules:[]

      },

      entry:{

            app:"./index.js"

      },

      output:{

            // 加入hash值可生成不同版本的打包文件

            path:`./dist/${Date.now()}`,

            filename:'[name].js',

            // publicPath用于修改项目中静态资源的引用绝对路径,开发环境默认/，线上环境可能是CDN

            publicPath:process.NODE_ENV=='production'?'http://*****':"/"

      },

      // loader放入module字段下，使用前npm install安装

      module:{

            rules:[

                  // 正则:匹配该类型文件

                  test:/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 

                  // 使用该loader处理该文件

                  loader:"url-loader",

                  // 配置

                  options:{

                        limit: 10000,

                        name: utils.assetsPath('img/[name].[hash:7].[ext]')

                  }

            ]

     },

      // 插件 

      plugin:[

            new webpack.optimize.UglifyJsPlugin()

      ],

      // devServer:启动http服务，同时启动webpack，通过websocket进行热更新  npm run dev其实执行的是webpack-dev-server命令

      // 修改index.html文件无法触发热更新，因为webpack从entry开始监听

      // 开发环境启动服务配置

      devServer:{

            // 地址

            host:"",

            // 端口

            port:"",

            // https证书

            https:{},

            // 对开发环境文件启用gzip压缩

            compress:false,

            // 启动后自动打开网页

            open：true

      },

      // source map:代码检查（黑色背景的错误提示）

      devtool: 'scource-map',

      watchOptions: {

                // 不监听的node_modules目录下的文件,这样做会大大减少性能，只是更新node_mudules时需要重启项目

                ignored: /node_modules/

      }

}