前端如何用jquery开发项目流程 jquery前端项目怎么打包

转载

AI领域布道师 2023-08-16 11:15:13

文章标签 前端如何用jquery开发项目流程 html css jquery 文章分类 jQuery 前端开发

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',// 只有首页用到了three
        bundle: [// 所有页都用这个
            // 要打包的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，发布时改为production

    module: {
        rules: [
            // 样式单独打包
            {
                test: /\.css/,
                //ExtractTextPlugin插件的作用是为了不让css被打包到了js文件中，不然浏览器打开index.html，就会发现css以style的形式被插到了head
                loader: 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 }),

        // 打包成单独css
        new 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')
        }]),

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

前端如何用jquery开发项目流程 jquery前端项目怎么打包_css