webpack(2)--webapck自身的配置

上一记介绍了webpack的安装和基本配置，本记将描述webpack自身的配置

一：指定webpack入口以及出口目录以及输出文件

—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html

三种办法：

命令行
当前根目录下输入npx webpack --entry 入口目录及指定入口文件 --output-path 出口目录及指定出口目录

// 入口：yentry.js   出口 ./output
npx webpack --entry ./src/myentry.js  --output-path ./output

缺点：命令行里输入，并不能确保效率
2. 在package.json中配置
在webpack中的script字段，给打包命令(如build)配置方法1的代码

// script字段下
"scripts":{
  "build" : "webpack  --entry ./src/myentry.js  --output-path ./output "
}

缺点：scripts内要写太多冗余代码，并不能一眼就看出要做的事情

3.在webpack.config.js中配置项目入口以及打包的目录文件(推荐)

webpack.config.js是一个用于webpack配置选项的文件，可以在这里做针对wenpack本身以及loader，plugins的配置。本质上是通过导出一个配置对象，当webpack运行时会优先读取这个文件，如果有就执行这个对象内的配置

// 由于webpack底层由node支持，因而使用node风格的导出方式(读者也可以尝试使用esmodule方式，但是流程太过繁琐，不推荐)
//webpack.config.js
const path = require('path') //引入node原生模块path
module.exports = {
  entry : './src/main.js'
  output: {
    path: path.resolve(__dirname,'build'),  //构建完成输出的目录地址(需要绝对路径)
    filename: 'mydemo.js'
  }

}

命令解析：

完成上述配置后，保存再执行一遍npm run build即可

webpack(2)--webapck自身的配置-LMLPHP

这样就完成了webpack入口以及出口文件的配置

二：重命名webpack配置文件

可以，但不推荐，重命名后会增加后续开发者阅读代码难度。因而普遍约定不要重命名webpack.config.js

重命名webpack.config.js的方法：
package.json下的script字段的build下输入以下命令：

// package.json
"script":{
"build":"webpack --config renameconfig.js"
}

下一记：常用loader的安装与配置

致爱丽丝