先放上一張配置成功的效果圖：
是不是跟網頁的環境配置成功不一樣，我也是第一次知道可以這樣，之前都是用vue-cli腳手架去配置，好了，話不多說，趕緊記下來步驟
第一步：webpack安裝
- 安裝webpack，運行
npm i webpack -g全局安裝webpack或在項目根目錄中運行npm i webpack --save-dev； - 接着全局安裝 webpack-cli（此工具用於在命令行中運行 webpack）
npm i webpack-cli -g。
第二步：初步使用webpack打包構建項目
1.運行npm init初始化項目，會得到package.json文件
2.自己手動構建項目框架（之前自己做的時候用的vue-cli搭建的，雖然可以用，但是環境配好以后不是一開始的成果圖）
3.安裝其他依賴庫，此處以jquery為例，在項目根目錄運行npm i jquery -s（一定要弄這步驟，要不然頁面出不來）
4.在index.js中導入依賴庫
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','red')
})
5.使用webpack對index.js打包（因為瀏覽器不能識別import語言，需要轉化）
（1）創建webpack.config.js（也是手動創建）
（2）在webpack.config.js中配置打包信息
const path = require('path');
module.exports = {
entry: './src/main.js', //打包的入口文件
output: { //打包完的輸入文件
path: path.resolve(__dirname, 'dist'), //打包輸出的文件目錄
filename: 'bundle.js' //打包輸出的文件名
},
devServer: { //配置webpack-dev-server
port: 3001,
contentBase: 'src', // 指定托管的根目錄
hot: true // 啟用熱更新
}
};
（3）運行webpack初始化項目，會將index.js打包輸出到dist中的bundle.js；
（4）在index.js中引入bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="../dist/bundle.js"></script> <body> <ul> <li>d</li> <li>d</li> <li>d</li> <li>d</li> <li>d</li> </ul> </body> </html>
6.webpack-dev-server——在內存中自動打包編譯bundle.js插件
1.安裝npm i webpack -D
2.運行npm i webpack-dev-server -D
3
在package.json中有的scripts配置腳本命令
{ "name": "hello", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.42.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" } }
由於項目中的 webpack-dev-server是本地安裝的，所以無法把它當做腳本命令在終端直接運行（只有那些安裝到全局-g的工具，才能在終端上正常運行），所以想要運行我們需要在package.json中有的scripts配置腳本命令，scripts是用於指定腳本命令，供npm直接調用。
4.運行npm run start就出來一開始的圖片效果
（以上除了npm run dev，其他的npm之前需要加c，也就是用cnpm）
轉載后續：（https://blog.csdn.net/qq_34708564/article/details/93547630）