Webpack入门教程三

本是古典何须时尚 2022-01-09 15:49 274阅读 0赞

### 16.打包命令除了webpack外,还可以在package.json中配置,配置内容如下 ###

{
      "name": "webpackapp",
      "version": "1.0.0",
      "description": "this is webpackapp",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start":"webpack"
      },
      "author": "suyan",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^2.2.1"
      }
    }

### 17.在命令行中我们不再使用webpack这个命令,改为cnpm start这个命令即可完成webpack的功能 ###

cnpm start

[![wKioL1in9m-RQDgPAAAUAZTgjaY060.png-wh\_50][wKioL1in9m-RQDgPAAAUAZTgjaY060.png-wh_50]][wKioL1in9m-RQDgPAAAUAZTgjaY060.png-wh_50]

### 18.在webpack的配置文件中配置source maps,修改webpack.config.js文件,添加devtool参数,修改内容如下 ###

module.exports = {
    	entry:  __dirname + "/app/Greeter.js",
    	output: {
    		path: __dirname + "/public",
    		filename: "bundle.js"
    	},
    	devtool:'eval-source-map'
    }

### 19.在devtool参数添加前打包和添加后打包,生成的bundle.js文件对比 ###

[![wKioL1in-HvR91pEAAB0UEiaq4A081.png-wh\_50][wKioL1in-HvR91pEAAB0UEiaq4A081.png-wh_50]][wKioL1in-HvR91pEAAB0UEiaq4A081.png-wh_50]

[![wKiom1in-J3jSPnNAABv0VvJcds084.png-wh\_50][wKiom1in-J3jSPnNAABv0VvJcds084.png-wh_50]][wKiom1in-J3jSPnNAABv0VvJcds084.png-wh_50]

webpack

[![wKioL1in-NHR-YWCAAAQ5DQwtsQ704.png-wh\_50][wKioL1in-NHR-YWCAAAQ5DQwtsQ704.png-wh_50]][wKioL1in-NHR-YWCAAAQ5DQwtsQ704.png-wh_50]

转载于:https://blog.51cto.com/suyanzhu/1899044

[wKioL1in9m-RQDgPAAAUAZTgjaY060.png-wh_50]: https://s1.51cto.com/wyfs02/M00/8D/B6/wKioL1in9m-RQDgPAAAUAZTgjaY060.png-wh_500x0-wm_3-wmp_4-s_814388853.png
[wKioL1in-HvR91pEAAB0UEiaq4A081.png-wh_50]: /images/20220109/1affbf4132b6438c987e0b6193ebc592.png
[wKiom1in-J3jSPnNAABv0VvJcds084.png-wh_50]: /images/20220109/f7e6e84211e048eda28fa69195c2008f.png
[wKioL1in-NHR-YWCAAAQ5DQwtsQ704.png-wh_50]: /images/20220109/95493929fdb04858b917553c78c000f4.png