jq项目webpack打包步骤

webpack打包多html传统项目

生成package.json文件
npm init -y

全局安装webpack 
cnpm install webpack -g

项目中安装，生成node_modules依赖
cnpm install webpack --save-dev
cnpm install webpack-cli --save-dev

配置webpack.config.js

打包html需要使用插件
cnpm install html-webpack-plugin --save-dev//页面打包
cnpm install html-withimg-loader --save-dev//打包html中img引入的图片
cnpm install uglifyjs-webpack-plugin --save-dev 打包js插件并压缩
cnpm install clean-webpack-plugin --save-dev//清除dist中的文件
cnpm install extract-text-webpack-plugin@next //抽离出来一个独立的css文件
cnpm install copy-webpack-plugin --save-dev//拷贝文件
cnpm install style-loader --save-dev//打包样式
cnpm install optimize-css-assets-webpack-plugin --save-dev
cnpm install css-loader --save-dev //处理 import / require（） @import / url 引入的内容
cnpm install file-loader --save-dev//打包图片文件
cnpm install image-webpack-loader --save-dev // 压缩图片

页面插件
cnpm install jquery --save-dev
cnpm install swiper --save-dev

编译
webpack -p 或者 npx webpack 或者webpack

别人git项目以后 执行一下命令：
npm install 或者cnpm i 淘宝镜像会快点

package.json

{
  "name": "caicai",
  "version": "1.0.0",
  "description": "官网",
  "main": "index.js",
  "scripts": {  },
  "repository": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.5.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "html-withimg-loader": "^0.1.16",
    "image-webpack-loader": "^6.0.0",
    "jquery": "^3.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "style-loader": "^1.1.3",
    "swiper": "^5.3.7",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "config": {}
}

webpack.config.js

/**
 * 引入打包所需脚本
 */
var webpack = require('webpack');
var path = require('path');
// 读取文件
var fs = require("fs");

// 根目录查找html
var pathName = "./";

// 存放所有html名称的集合
var htmlFiles = []

// 匹配html文件
var ipReg = /\.(htm|html)$/i;

// 找到根目录的所有html 除index之外 存在htmlFiles中
fs.readdirSync(pathName).forEach(files=>{
  if(ipReg.test(files) && files.indexOf('index') < 0){
    htmlFiles.push(files)
  }
});

// 将所有页面合并到plugins
function html_plugins() {
    var r = []
    for (var i=0;i

常见报错信息：

1、Unexpected string // 少了逗号,代码不规范
2、Unexpected identifier// 少了逗号,代码不规范
3、一大片报错信息的话，那就是少安装了依赖，仔细阅读错误代码，一般错误代码第二行或者第三行，就能看到依赖的名称
然后cnpm install 名称 --save-dev

4、cnpm不成功就是你没有安装淘宝镜像，用npm也行
5、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
6、如果img报错那就是图片不存在

有疑问可以问我
我这个要是有什么bug 也可以提醒我，谢谢。欢迎指教
我们的目录结构