1. 常见的前端构建，打包工具有哪些
事实上前端构建过程一般都是建立在前后分离基础上的，你要想让自己的构建过程清晰、简单和方便，请首先将自己的项目前后实现分离。当然这个有难度，所以你的这个场景并不是非常适合gruntjs通常的构建模式。 对应问题讲完，再给你一些建议。
2. 怎么讲前端的代码打包成web app
方法/步骤
下载安装MyEclipse2014，Android SDK，eclipse(需配置Android开发环境)
Java和Android环境安装与配置，将另写经验分享，读者也可网络参考其他相关资料，自行安装
打开MyEclipse2014，新建一个HTML5 Mobile Application Project，命名，例如：hello
html5程序在工程www目录下编辑；
编辑好我们的html5程序，下面就要开始学习打包了
这里介绍两种打包方式：1、PhoneGap Build Service 打包
PhoneGap官网有相关教程可参考，不具体介绍
2、android SDK +eclispe 打包
android SDK +eclispe 打包(前提已配置好，android开发环境)：
Step1、启动eclipse，新建Android Application Project，即Android工程，命名，例如：hello
Step2、将前面Myeclipse2014中编辑好的HTML5程序(www整个目录）拷至刚刚在eclipse新建hello工程对应assets目录下面
Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动，这里我们要使用Android系统自带的WebView控件（具体信息参考Adroid开发文档）---在工程下找到res->layout->activity_main.xml并打开，向里面插入WebView控件，编辑好自己想要的样式
Step4、在主程序入口，用刚刚编辑好的WebView控件将HTML5程序引入，此时，主体功能已实现，编译工程即可得到apk
3. 【Web前端基础】webpack打包原理是什么
【Web前端基础】webpack打包原理是什么？1、概念
本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生产的文件
(function (moles) {
var installedMoles = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moleId) {
// 检查缓存中是否有模块
if (installedMoles[moleId]) {
return installedMoles[moleId].exports;
}
// 创建一个新模块，并缓存起来
var mole = installedMoles[moleId] = {
i: moleId,
l: false,
exports: {}
};
// 调模块的函数，moles
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
mole.l = true;
// 返回对应模块
return mole.exports;
}
__webpack_require__.m = moles;
__webpack_require__.c = installedMoles;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (mole) {
var getter = mole && mole.__esMole ?
function getDefault() {
return mole['default'];
} :
function getMoleExports() {
return mole;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = "";
// 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (mole, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (mole, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esMole", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
观察以上代码得到结果：
1、打包后的代码是一个立即执行函数，且传入的参数为一个数组
2、参数数组就是我们引用的模块
3、每一个模块对应着数组的位置就是那么的id
4、在立即函数中加载入口文件，并执行
__webpack_require__ ： 加载并执行某一个模块并将模块缓存在 installedMoles 中。
moles[moleId].call(mole.exports, mole, mole.exports, __webpack_require__);
这里是执行引用的某一个模块。
并将mole，exports，require 加入模块中。
这也是为什么我们在模块中有全局变量 mole/exports/require
通过对打包后的文件分析，基本可以完全理解打包过程。
4. webpack打包的CSS含有两个相同的引入
1. 摘要
Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。
想了解Webpack，看这篇就够了
图1-1 Webpack打包流程图
2. Webpack五个核心概念
2.1 Entry
入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。
2.2 Output
输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
2.3 Loader
Loader让Webpack能够去处理那些非JavaScript语言的文件，Webpack本身只能理解JavaScript。
2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。
2.5 Mode
模式(Mode)指示Webpack使用相应模式的配置。分为development和proction两种模式，下面分别进行简述。
development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedMolesPlugin插件；
proction: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为proction，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、MoleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。
3. Wbepack配置
3.1 webpack.config.js文件
webpack.config.js是webpack的配置文件，用来指示webpack工作，运行webpack指令时，会加载里面的配置，所有构建工具都是基于nodejs平台运行的，默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。
想了解Webpack，看这篇就够了
图3-1 webpack.config.js基础配置
3.2 devServer配置
开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装webpack-dev-server后，通过npx webpack-dev-server命令启动devServer，核心代码如图3-2所示。
想了解Webpack，看这篇就够了
图3-2 devServer配置核心代码
3.3 打包html/样式/图片/其它资源
打包不同的资源会使用不同的loader和插件，打包html/样式/图片/其它资源的流程如下所述。
3.3.1 打包html资源
1.下载html-webpack-plugin插件；
2.引入html-webpack-plugin插件；
3.使用html-webpack-plugin插件，并进行相应配置。
3.3.2 打包样式资源
不同的样式文件需要配置不同的loader
1.下载loader；
2.配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中，style-loader的作用是创建style标签，将js中的样式资源插入进去，添加到head中生效。
3.3.3 打包图片资源
1.下载url-loader，file-loader
2.配置loader
3.3.4 打包其它资源
1.下载file-loader
2. 配置loader，配置该loader作用于不为html/css/less/js的其他文件
3.4 提取css成单独文件/css兼容性处理/压缩css
3.4.1 提取css成单独文件
样式文件打包后会默认和js文件一起输出，可以通过插件将打包后的css文件单独输出，流程如下所述。
1.下载mini-css-extract-plugin插件
2.引用该插件
3.配置
3.4.2 css兼容性处理
1.下载postcss-loader和postcss-preset-env
2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本
3.通过postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。
3.4.3 压缩css
1.下载optimize-css-assets-webpack-plugin插件
2.引用该插件
3.使用该插件
3.5 js语法检查eslint/js兼容性处理/js压缩
3.5.1 js语法检查eslint
1.下载eslint-loader和eslint
2.在package.json中的eslintConfig中进行配置
3.配置eslint-loader，其中只需检测js文件并要排除第三方库，只检测自己写的源代码，同时可在options配置中设置fix:true，自动修复eslint的错误。
3.5.2 js兼容性处理
1.下载babel-loader、@babel/core、@babel/preset-env，通过@babel/preset-env做基本的js兼容性处理，然后通过corejs做前面无法实现的兼容性处理，并实现按需加载
2. 配置loader
js兼容性处理核心代码如图3-3所示
想了解Webpack，看这篇就够了
图3-3 js兼容性处理核心代码
3.5.3 js压缩
mode设置为proction生产环境时会自动压缩js代码。
4. webpack性能优化
可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。
4.1 HMR
HMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在devServer中设置hot:true属性启动HMR功能。
其中对于样式文件，可以使用HMR功能，因为style-loader内部实现了；
对于js文件，默认不能使用HMR功能，解决方法：修改入口文件js代码，添加支持HMR功能的代码，另外HMR只能处理非入口js文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；
对于html文件，默认不能使用HMR功能，同时会导致html文件不能热更新，解决方法：修改entry入口文件，将html文件引入，只能解决html文件不能热更新的问题。
5. 前端打包问题
你要开发一个公共包，但是又不了解js知识，那就把js当java对待就可以了
这个包依赖jQuery，那么打包后的主文件不一定将jQuery也打包进去
这个打包后的主文件不一定不再依赖其它任何js文件
请采纳
6. laravel 前端脚手架怎么修改就打包资源
：laravel框架的开发不同于早期的那种php和asp的页面数据嵌套，无法用那种思路来开发网站的。不过倒是可以考虑前后台分离的思路。用laravel框架来做接口，暴露给html页面，用JSON来进行数据交互。然后在html页面用ajax来请求数据来更新页面内容。
7. web前端打包工具有哪些
工具很多，目前常用的是webpack， grunt等，在没出现更好的工具之前，学好这两个其中的一个基本都够用了。
8. 可以将前端文件夹打包成一个独立.html文件直接打开使用吗
引用使用相对路径，或者制作成Electron应用
9. 前端中常见的打包工具有哪些
基本就是以下这些：
1、Ant (java)
2、Buildy (NodeJs)
3、Gmake (jQuery采用) Jammit (Ruby)
4、Jasy (Python)
5、Rake (Ruby,类Gmake)
6、Sprockets (Rack)
10. 前端打包,怎么只替换修改的文件,而不是整个项目替换
使用打包工具后无法之修改制定的文件
1、打包工具是在源码发生了变化后重新打包编译源代码，打包工具并不能区分具体生成后打哪些文件发生了变化
2、所以如果打包整个项目比较慢的话可以考虑优化打包速度，一般是不支持只替换修改的文件的