webpack参数解析

111 阅读1分钟

首先webpack多模块与单模块的区别就是多模块是多个入口文件,单模块是单个入口文件。

入口文件写法 entry:

单模块写法: entry: { app: './src/main.js' } 或者 entry: './src/main.js';

多模块写法: entry: {app: './src/ app.js', main: './src/main.js'}  或者 entry: ['./src/app.js', './src/main.js']

文件输出目录 output:

output配置参数

    1.path:  指本地调试或者打包以后的服务器的根目录。可以是相对路径也可以是绝对路径。\

    2.publicpath:   所有输出的文件都会被打包到这个路径。如果没有默认为path根目录。  \

    3.filename: 入口js文件输出的路径(这个路径是相对与path与publicPath路径结合以后的路径)。\

    4.chunkFilename: webpack针对不同的模块进行js代码分割以后的文件的输出路径\

resolve配置参数   //创建 import 或 require 的别名,来确保模块引入变得更简单。

    1.extensions: ['.js', '.vue']  // 自动解析的文件拓展名。 本例  引入 js文件或者 vue文件时文件扩展名可以省略;\

    2.alias:{ vue$:‘vue/dist/vue.esm.js', @assets: './src/module.assets' } //给插件或者是路径定义别名。在模块中引入vue就是引入的vue/dist/vue.esm.js  文件。\

       在路径中@asssets就代表 './src/module.assets' 

devtool: 配置是否生成source-map文件

module模块配置

    module.rules: []   // loader配置 数组 在 webpack 1 的这个配置项是module.loaders

plugins:[]插件配置