webpack初认知2

回顾___webpack初认知1

回顾

webpack初认知1,已经说了如何搭建个简单的webpackdemo

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能（比如说以后会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如已经提到的，这样不太方便且容易出错的，一个更好的办法是定义一个配置文件。

• 我们来写个webpack.config.js，简化上文中的命令行操作。

module.exports = {
  entry:  __dirname + "/webapp/main.js", //唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "build.js"//打包后输出文件的文件名
  }
}
//注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

• 只需要 输入

webpack
//自动解析打包

tips：package.json配置统一入口script

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.6.0"
  }
}
//注：package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
//意思就是如果在这里配置了webpack指令等。。webpack可以不用单独模块安装

care：package.json配置统一入口script

{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.6.0"
}
}

- 再运行 npm build ：：无效
![image.png](https://img.haomeiwen.com/i3402722/2e0aea6c45aae40f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- npm的`start`是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用`npm start`就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用`npm run {script name}`如`npm run build`。