先放上一张配置成功的效果图：
是不是跟网页的环境配置成功不一样，我也是第一次知道可以这样，之前都是用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）