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<htmlFiles.length;i++){var conf={favicon: './favicon.ico',   //生成html文件的favicon的路径chunks: ['js/bundle','libs/aos'], // 所有子页面都调用这些  不写chunks的话，就是所有js都调用，可以和index写在一起，然后就不用了分开写，然后还判断了filename: htmlFiles[i],template: htmlFiles[i],minify: false};r.push(new HtmlWebpackPlugin(conf));}return r
}// 打包html的插件
var HtmlWebpackPlugin = require('html-webpack-plugin');// 打包js插件
var uglify = require('uglifyjs-webpack-plugin');// 用于在构建前清除dist目录中的内容
var { CleanWebpackPlugin } = require('clean-webpack-plugin');// 单独打包样式
var ExtractTextPlugin = require('extract-text-webpack-plugin');// 压缩css文件
var OptimizeCssplugin = require('optimize-css-assets-webpack-plugin');// 拷贝文件
var CopyWebpackPlugin = require('copy-webpack-plugin');/*** 打包配置项*/
module.exports = {// 和不在source显示webpack一起配置devtool: false,entry: {//打包成多个是为了解决加载顺序导致的bug'libs/aos':'./libs/aos/aos.js',// 所有页面调用aos执行动画'libs/three.min':'./js/three.min.js',// 只有首页用到了threebundle: [// 所有页都用这个// 要打包的css样式'./js/css.js','./libs/jquery/jquery.nicescroll.min.js','./libs/layui/layui.all.js','./js/index.js','./js/common.js','./js/nav.js']},output: {// 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，filename: '[name].js',//__dirname 当前webpack.config.js的路径path: path.resolve(__dirname, './dist'),},mode: 'development', // 开发模式设置为development，发布时改为productionmodule: {rules: [// 样式单独打包{test: /\.css/,//ExtractTextPlugin插件的作用是为了不让css被打包到了js文件中，不然浏览器打开index.html，就会发现css以style的形式被插到了headloader: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{// 图片test: /\.(png|jpg|gif|svg|webm)$/i,use:[{loader: 'file-loader',options: {// 保持图片名不变，而且也能够添加到指定目录下name: 'images/[name][hash:8].[ext]',publicPath: './',esModule: false// outputPath: './',}},'image-webpack-loader',//压缩图片]},{// 页面test: /\.(htm|html)$/i,loader:'html-withimg-loader'}]},// 插件plugins: [// 防止源文件内容包含在源映射中new webpack.SourceMapDevToolPlugin({ noSources: false }),// 打包成单独cssnew ExtractTextPlugin({filename:'css/bundle.css',}),// 压缩 css 文件new OptimizeCssplugin(),// 拷贝文件插件new CopyWebpackPlugin([{from: path.resolve(__dirname, 'images/banner.webm'),to: path.resolve(__dirname, 'dist/images/banner.webm')}]),// 全局jsnew webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery",//Angular 会寻找 window.jQuery 来决定 jQuery 是否存在Swiper: ['swiper', 'default']// 这个全局定义 就类似vue一样的定义，这样能解决报Swiper未定义的bug}),// 压缩js代码  这个方法可以不调用了，因为webpack4已经内置了// new uglify(),// 清除dist构建目录文件new CleanWebpackPlugin(),// html页面,可多个new HtmlWebpackPlugin({title: '123',   //生成html文件的标题favicon: './favicon.ico',   //生成html文件的favicon的路径// chunks: ['bundle','libs/aos'],filename: 'project/index.html',template: 'project/index.html',minify: false//false 就是不使用html压缩/*minify: {removeComment: true,collapseWhitespace: true,removeEmptyAttributes:true}*/})].concat(html_plugins())
}

常见报错信息：

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 也可以提醒我，谢谢。欢迎指教
我们的目录结构

jq项目webpack打包步骤相关推荐

Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
webpack打包普通html项目,webpack打包处理
简介 ?webpack 是前端最流行的打包工具,能够做到以下: 1) 将 sass/less 等预编译的CSS语言转化为浏览器能够识别的 css 文件 2 )能够将多个文件(比如:多个sass文件 ...
Vue项目上线打包步骤
1.在vue.config.js中配置publicPath,只需给默认的添加一个"." {publicPath: './' } 2.在package.json中找打包命令,例如:b ...
php项目webpack打包,利用node.js对webpack打包
本篇文章主要介绍了webpack打包node.js后端项目的方法,现在分享给大家,也给大家做个参考. 本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖npm ...
VUE项目WebPack打包删除注释和console
项目中使用了 jspdf 这个插件,webpack打包后注释里存在这样的领导让删除,于是使用插件 cnpm install uglifyjs-webpack-plugin -D vue.config ...
webpack5打包普通html项目,webpack打包其他资源
webpack打包其他资源文件图片打包 file-loader的使用 css内引入图片资源安装 npm install file-loader -D outputPath:图片文件打包的放在哪个文 ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...

jq项目webpack打包步骤

常见报错信息：

jq项目webpack打包步骤相关推荐

最新文章

热门文章