你真的懂webpack編譯配置嗎？

1、初始化項(xiàng)目

npm init

這里注意一點(diǎn)，初始化項(xiàng)目時，不要起名為webpack。
2、安裝webpack
這里是局部安裝，我推薦這樣做。

npm i -D webpack

3、修改package.json
加上 "start": "webpack --config webpack.config.js" 方便以后運(yùn)行命令。

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5"
  }
}

4、創(chuàng)建index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--導(dǎo)入 Webpack 輸出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

5、創(chuàng)建工具函數(shù)show.js

// 操作 DOM 元素，把 content 顯示到網(wǎng)頁上
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通過 CommonJS 規(guī)范導(dǎo)出 show 函數(shù)
module.exports = show;

6、創(chuàng)建JS 執(zhí)行入口文件 main.js

// 通過 CommonJS 規(guī)范導(dǎo)入 show 函數(shù)
const show = require('./show.js');
// 執(zhí)行 show 函數(shù)
show('Webpack');

7、根目錄下創(chuàng)建webpack.config.js

const path = require('path');

module.exports = {
  // JavaScript 執(zhí)行入口文件
  entry: './main.js',
  output: {
    // 把所有依賴的模塊合并輸出到一個 bundle.js 文件
    filename: 'bundle.js',
    // 輸出文件都放到 dist 目錄下
    path: path.resolve(__dirname, './dist'),
  }
};


8、執(zhí)行命令

npm run start






作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路