基於webpack4實踐：開始：打開控制面板，制定到創建Webpack的文件夾。 並創建初始配置文件package.json 輸入命令：npm init -y，在文件夾中出現一個package.json文件，並出現一個文件夾“node_modules” 接著就是安裝webpack 插件了，輸入命令： ...
基於webpack4實踐：
開始：打開控制面板，制定到創建Webpack的文件夾。 並創建初始配置文件package.json
輸入命令：npm init -y，在文件夾中出現一個package.json文件，並出現一個文件夾“node_modules”
接著就是安裝webpack 插件了，輸入命令：npm install -D webpack，成功後在package.json文件中出現下麵的代碼。
npm install -D webpack-cli，該安裝可能會提示關於“src”的相關錯誤，就是需要配置相關的目錄結構，如下：
預設webpack，是打包“src”下麵的index.js，併在dist文件夾中生成main.js。所以需要該結構。
沒有相關的index.js文件和index.html文件，目前是不成功的。
先在安裝一個插件：npm install --save lodash
然後創建index.js，如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
在dist文件夾中創建html文件：
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
然後執行命令：npx webpack，則在dist中生成一個main.js文件，該文件為index.js的打包文件。直接瀏覽器查看index.html則看到相關頁面信息。
一般項目肯定無法這樣操作，因為不可能只編譯一個JS和一個Html，所以我們自定義配置一個config.js。在根目錄創建webpack.config.js，寫入：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
然後執行下麵的命令：npx webpack --config webpack.config.js，則打包時，就會按照webpack.config.js中設置的規則生成文件。
在查看dist文件夾中會生成一個bundle.js。
如果使用的是VSCode開發，則可以在package.json文件中添加“scripts”配置："build": "webpack --progress --colors"，
然後就可以在控制台輸入：npm run build做編譯。
