webpack打包普通html项目,webpack打包处理
简介
?webpack 是前端最流行的打包工具,能够做到以下:
1) 将 sass/less 等预编译的CSS语言 转化为 浏览器能够识别的 css 文件
2 )能够将多个文件(比如:多个sass文件)打包生成一个文件
3 )能够打包 images/styles/assets/scripts 等前端常见的文件
4 )搭建了开发环境(开启了服务器)
5 )监视文件变化,文件改变后,能够自动刷新浏览器
6 )对于Vue来说,可以将 单文件组件(*.vue) 类型的文件,转化为浏览器能够识别的内容
项目打包上线:
1 )只需要执行一条命令: npm run build 就可以对项目进行打包处理
2) 所有文件(css/js/html) 的压缩合并
3 )在打包的过程中分离或者合并文件
4 )能够通过代码分离功能实现项目的按需加载
四个核心概念
?入口 entry
?出口 打包后输出内容
loaders 加载器:对于非JS的静态资源
plugins 插件
使用步骤
1 安装: npm i -D webpack webpack-cli
2 webpack 使用的两种方式:
2.1 命令行的使用方式
2.2 配置文件
命令行使用方式:
webpack 入口文件 出口文件路径
最基本的打包: webpack ./src/main.js
index.html引入js文件:
注意:使用 webpack 的时候应该提供mode, 可以是: production 或者 development
// production 表示: 生产模式 -- 生产环境(也就是给用户使用的)
// development 表示: 开发模式 -- 开发环境(也就是给开发人员开发使用的)
?指定模式:
./node_modules/.bin/webpack ./src/main.js --mode development
指定为生产模式:
./node_modules/.bin/webpack ./src/main.js --mode production
演示指定出口文件路径:
?./node_modules/.bin/webpack ./src/main.js -o ./dist/a.js --mode production
配置scripts去掉路径前缀:
?.\node_modules\.bin\webpack ./src/main.js --mode development
? 解决问题: 去掉 .\node_modules\.bin\
1 在 package.json 的 scripts 中添加一个 build 脚本
2 将 webpack 命令作为 build 脚本的值
3 在终端中执行命令: npm run build 来运行上面创建好的脚本
"scripts": {
"build1": "webpack ./src/main.js --mode development",
}
webpack打包处理的过程:
案例: 使用jQuery实现隔行变色的效果
//index.html
- 这是第1个li元素
- 这是第2个li元素
- 这是第3个li元素
- 这是第4个li元素
- 这是第5个li元素
- 这是第6个li元素
- 这是第7个li元素
- 这是第8个li元素
- 这是第9个li元素
- 这是第10个li元素
package.json
"scripts": {
"build1": "webpack ./src/main.js --mode development",
"build": "webpack",
"dev": "webpack-dev-server --hot"
},
main.js
// ES6 中的模块化语法:
import $ from 'jquery'
$('#list > li:odd').css('background-color', '#def')
$('#list > li:even').css('background-color', 'skyblue')
// 导入css文件
import './css/index.css'
1 运行了webpack的打包命令: webpack ./src/main.js --mode development
2 webpack 就会找到我们指定的入口文件 main.js
3 webpack 就会分析 main.js 中的代码, 当遇到 import $ .... 语法的时候, 那么, webpack
就知道,我们要使用 jQuery 这个模块
4 webpack 就会将jQuery模块的代码拿过来
5 然后,继续往后分析, 如果在遇到 import 语法, 继续加载这个模块 ...
6 直到分析完成整个 JS 文件后, 将 main.js 中所有用到的模块代码 与 我们自己写的js代码
打包生成一个JS文件, 也就是 dist/main.js
webpack 配置文件的使用方式:
在项目根目录中创建配置文件: webpack.config.js
// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path')
// const webpack = require('webpack')
// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/main.js'),
// 出口
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
// 模式
mode: 'development',
devServer: {
// 自动打开浏览器
open: true,
// 修改端口号
port: 3000
// 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
// 第一步:
// hot: true
},
// 配置loader
module: {
rules: [
// test 是一个正则, 用来匹配加载文件的路径
// 比如: import './css/index.css'
// use 表示使用哪个loader来处理这个类型的文件
// 注意: 有顺序!!!
// 处理过程是: 从右往左
// css-loader 读取CSS文件,将其转化为一个模块
// style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
plugins: [
// 第二步:
// new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 指定模板文件路径
template: path.join(__dirname, 'index.html')
})
]
}
webpack-dev-server:
1 npm i -D webpack-dev-server
2 开启服务器
3 自动打开浏览器
4 监视文件变化, 自动刷新浏览器
// 使用步骤:
1 安装: npm i -D webpack-dev-server
2 在 webpack.config.js 中配置 devServer 配置项
3 在 package.json 中添加一个配置项: "dev": "webpack-dev-server"
// webpack-dev-server 帮我们搭建了开发环境, 使用之后, 我们只需要写代码完成功能即可, 其他的所有内容, 这个插件都帮我们处理了
// webpack-dev-server 命令 和 webpack 命令的区别:
// 开发期间 webpack-dev-server
// 项目打包上线 webpack
// webpack 命令会生产 dist 文件夹
// webpack-dev-server 不会创建 dist 文件夹, 而是将所有内容放在内存中
html-webpack-plugin:
// 作用:
1 根据指定的模板页面(index.html)在内存中生产一个新的页面,并且,浏览器打开的就是生成的页面
2 能够自动引入 css/js 等文件
使用:
1 安装: npm i -D html-webpack-plugin
2 在 webpack.config.js 中导入这个模块
3 在 plugins 中配置
loader 加载器:
webpack 自身只能处理普通的JS文件, 而对于 非JS 文件, 都需要对应的 loader来进行特殊的处理.
也就是每种类型的文件, 都有自己专门的loader来处理,例如:
css文件,需要使用 style-loader css-loader
less文件,需要使用 style-loader css-loader less-loader
使用步骤:
1 安装: npm i -D style-loader css-loader
2 在 webpack.config.js 中的 module 里面配置loader处理规则
?
webpack打包普通html项目,webpack打包处理相关推荐
- webpack5打包普通html项目,webpack打包其他资源
webpack打包其他资源文件 图片打包 file-loader的使用 css内引入图片资源 安装 npm install file-loader -D outputPath:图片文件打包的放在哪个文 ...
- 使用Webpack打包Typescript ES6项目(转ES5)
前言 目前,ES6标准逐渐成为主流,然而一些旧的浏览器,对于ES6的支持并不十分完善,这时候就需要将ES6转为ES5,以兼容旧的浏览器. Webpack是一个现代 JavaScript 应用程序的静态 ...
- maven项目如何打包运行指定java程序(maven-shade-plugin插件的使用)
其实maven项目的打包就是将项目代码打包成可执行文件,在maven中有默认的打包插件,但是想要运行指定java程序就要使用maven-shade-plugin插件 maven-jar-plugin是 ...
- php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
- 创建基于webpack打包的vue项目
创建基于webpack打包的vue项目 结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...
- Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
- vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录 基于vue/cli3.0+脚手架搭建Vue项目(12) 前言 一.webpack配置 1.配置vue.config.js 2.配置Dl ...
- jq项目webpack打包步骤
webpack打包多html传统项目 生成package.json文件 npm init -y全局安装webpack cnpm install webpack -g项目中安装,生成node_modul ...
- vue项目(webpack+mintui),使用hbuilder打包app - 小小人儿大大梦想 - 博客园
一.配置config/index.js 本人没有配置index.js文件,就开始进行了打包,结果最终效果是页面空白,解决了空白,接着底部图标(我是用的阿里巴巴图片)资源找不到.所以配置这步比较重要. ...
最新文章
- 驰骋工作流引擎JFlow与activiti的对比之4种包含多实例的模式
- sigsuspend sigprocmask函数的用法
- java zoneoffset,java - 如何在java8中获取默认的ZoneOffset? - SO中文参考 - www.soinside.com...
- mysql读出来的日期后面多了个 .0处理及layui中日期控件点击一闪而过处理
- Android 任务栈空间,【Android】任务和返回栈(tasks and back stack)
- 三维点云学习(3)7- 实现GMM
- CCF NOI1115 找数
- python学习-大牛整理!Python学习方法和学习路线,看完茅塞顿开!
- java怎样中断函数_Java中断一个线程操作示例
- 用hadoop运行一个简单程序WordCount
- Oracle性能优化求生指南 Oracle数据库专家Guy Harrison权威著作
- 上海师大计算机科学与技术,上海师大计算机科学与技术专业本科文凭、国家承认可查证书...
- 打印程序在计算机上的应用程序,修复无法在计算机上运行的后台打印程序服务的操作步骤...
- JavaScript swiper
- 亚马逊AWS命令行 aws cli
- #概率论#n重伯努利实验
- 华为Atlas 500智能小站如何使能边缘计算?
- Dynamics 365 JS调WEB API 报missing privilege ae5c41f0-e823-4cb9-b25a-8ef020201973
- (转)ABPA UI--Triggering PAI manually 通过设置新的OKCODE、触发PAI
- 稳定性大幅度提升:SOFARegistry v6 新特性介绍