webpack的配置文件

思考:在我們執行npx webpack index.js 的時候時候webpack會自動幫我打包生成一個dist 文件夾下面有mian.js
引入dist下面的mian.js即可,但webpack為什么會生成dist文件不是別的文件夾名字？是mian.js不是bundle.js？還有平常我們在使用vue項目的時候都是直接npm run serve運行項目，為什么這里是npx webpack index.js??有沒有一個配置文件讓我們去配置自己想要的信息了？

webpack.config.js

事實上webpack團隊提供了webpack.config.js文件給我們配置自己想要的信息，在你沒有配置的時候webpack會用一些默認配置項。

 

  //node的核心模塊
  const path=require('path');
  module.exports={
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'bundle')
    }
  }
  //entry:你要打包的入口文件
  //output:打包好的文件放到哪？

以上是我的配置文件webpack.config.js,注意：__dirname有兩個下划線.
下面是我的執行結果:

 

 

 

 這樣你可以指定打包好的文件生成到哪個路徑下加什么名字。

npm run serve

如果你不想用npx webpack的方式打包那么你只要進行如下操作就行了:

//1.修改package.json文件
{
  "name": "webpack-demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  }
}
//添加了"scripts": {
 //   "serve":"webpack"
 // }
//執行
npm run serve

得到的結果照樣可也打包成功!

 

 

 

 

 

 

 

 

webpack.config.js

事實上webpack團隊提供了webpack.config.js文件給我們配置自己想要的信息，在你沒有配置的時候webpack會用一些默認配置項。