webpack4.16压缩打包
webpack4.16压缩打包
本文所用插件版本如下:
- nodejs:v8.11.3;
- npm:5.6.0
- webpack:4.16
webpack的更新速度很快,差不多几个月就会出一版,最新的4系列对webpack2和webpack3进行了很大的改进,同时也有很多坑需要踩,本文使用最基本的html,css,js文件进行压缩打包,对webpack4.16使用方法进行梳理,有任何问题也欢迎提出。同时附上webpack中文官方文档,有部分概念、配置、API等,请参考官方文档。
准备
1. 安装Node.js
在Node.js官网下载8.11.3 lts版本,安装即可,安装完成后在cmd中输入:
node -v
显示了版本号说明安装成功!同时npm是Node.js的包管理工具,在安装Node.js时,npm也已经自动安装。
2. 安装webpack和webpack-cli
cmd输入
npm install webpack webpack-cli --save-dev
等待安装成功后,cmd输入
webpack -v
显示了版本号后,说明webpack安装成功。
创建项目
- 创建项目文件夹,如:webpackdemo
- 在项目文件夹中命令行输入:
npm init -y
会看到多了一个package.json和package-lock.json文件,命令行中的提示warning不用管。
- 在项目文件夹中新建src文件夹,作为存放html,css,js文件的文件夹。
在src中新建index.html文件,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
</head>
<body>
<div class='app' >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
新建index.css文件,为html写上样式:
.app{
background-color: #ff8080;
color: black;
font-size: 18px;
}
新建index.js文件,内容暂时留空。
同时需要注意的是:在index.html中,不要吧index.css和index.js引入。
新建dist文件夹,作为输出文件夹,打包完成的文件将在这里存放。
在webpackdemo项目文件中新建webpack.config.js
命令行运行:
webpack
会下载生成node_modules文件夹。
最后的文件夹如下:
配置
webpack.config.js是webpack的配置工具,主要的工作在这里进行。
依次写入如下内容
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.js"
},
devServer: {
port: 8080,
open: true,
setup: function (app) {
app.get('/data', (req, res) => {
res.json({
name: 'kk',
age: 18
})
})
}
},
module: {
rules: [ {
test: '/\.js$/',
use: 'bable-loader'
}, {
test: '/\.css$/',
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
]
}, {
test: '/\.png|jpe?g|svg$/',
use: 'url-loader'
}]
},
plugins: [
new htmlWebpackPlugin({
template: "./src/index.html",
filename: 'index1.html',
minify: {
minimize: true,
removeConments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
}
})
]
}
这里的坑比较多,明天再细细的介绍。
在index.js中引入css文件:
import style from "style-loader!css-loader!./style.css";
这里的“style-loader!css-loader!”是webpack的css解析插件。
然后运行:
webpack
会发现dist文件夹中生成了index1.html和main.js ,
index1.html文件内容如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>测试</title></head><body><div class="app">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><script type="text/javascript" src="main.js"></script></body></html>
main.js内容如下:
说明已经打包成功,此时运行index1.html,即可看到原文件index.html中的内容:
webpack4.16压缩打包的更多相关文章
- [拾 得] zip gzip bzip2 & tar 压缩/打包 四大金刚
坚持知识分享,该文章由Alopex编著, 转载请注明源地址: http://www.cnblogs.com/alopex/ 索引: 介绍压缩和打包 gzip bzip2 zip 的基本使用 gz ...
- r.js压缩打包(require + backbone)项目开发文件
最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...
- 压缩打包介绍、gzip、bzip2、xz压缩工具
第5周第1次课(4月16日) 课程内容: 6.1 压缩打包介绍6.2 gzip压缩工具6.3 bzip2压缩工具6.4 xz压缩工具 6.1 压缩打包介绍 为什么要给文件进行压缩呢?首先压缩和不压缩空 ...
- 服务端生成word并压缩打包下载
所需工具 phpwrod 库 php_zip 扩展 下载phpword库,放到类加载路径. 安装php_zip扩展 下载地址 http://pecl.php.net/package/zip linux ...
- Linux中的文件压缩,打包和备份命令
压缩解压命令 gzip 文件 -c : 将压缩数据输出到屏幕,可用来重定向 -v 显示压缩比等信息 -d 解压参数 -t 用来检验一个压缩文件的一致性看看档案有没错 -数字 : 压 ...
- C# 压缩打包文件下载
C# 压缩打包文件下载 public class MyNameTransfom : ICSharpCode.SharpZipLib.Core.INameTransform { #region INam ...
- mvn项目压缩打包
通常情况下,maven打包结果为jar或war包.如果需要一并打包配置文件等参数,通过resources配置指定需要打包的文件参数,如下示例: <project> ... <!-- ...
- Linux中常用压缩打包工具
Linux中常用压缩打包工具 压缩打包是常用的功能,在linux中目前常用的压缩工具有gzip,bzip2以及后起之秀xz.本文将介绍如下的工具常见压缩.解压缩工具以及打包工具tar. gzip2 直 ...
- linux 的压缩 打包
1.压缩打包,常见的命令:gzip bzip2 xz zip tar gzip: 不能压缩目录 gip -[0-9] file_name 压缩级别, 默认是6 gzip file_nane ...
随机推荐
- delphi+mysql做的图书管理系统,怎么把mysql数据库也一起打包进去?我用的是delphi的Express组件。
sqlconnection,sqlquery1这些组件,我连接数据库的时候是用对象编辑器里的属性进行连接的,在sqlconnection中指定了字符集utf8,有些人做的方法是利用代码连接的数据库,如 ...
- 记录MNIST采用卷积方式实现与理解
从时间上来说,这篇文章写的完了,因为这个实验早就做完了:但从能力上来说,这篇文章出现的早了,因为很多地方我都还没有理解.如果不现在写,不知道什么时候会有时间是其一,另外一个原因是怕自己过段时间忘记. ...
- 大数据学习笔记之Hadoop(二):HDFS文件系统
文章目录 一 HDFS概念 1.1 概念 1.2 组成 1.3 HDFS 文件块大小 二 HFDS命令行操作 三 HDFS客户端操作 3.1 eclipse环境准备 3.1.1 jar包准备 3.2 ...
- build temu error about SDL
1. 安装sdl2 sudo apt-get install libsdl2-dev 2. 将configure文件中与SDL有关的地方改成SDL2 if test -z "$sdl&quo ...
- VUX中selector组件数据错误,value-map不能正常转换接口数据
项目中有个地方需要用到下拉框,使用VUX的selector组件,使用value-map属性进行接口数据转换未成功,出来的还是原数据 看了又看也没写错呀,字段什么的都是复制上去的,去网上查了也没查到怎么 ...
- upc组队赛15 Lattice's basics in digital electronics【模拟】
Lattice's basics in digital electronics 题目链接 题目描述 LATTICE is learning Digital Electronic Technology. ...
- upc组队赛14 Communication【并查集+floyd /Tarjan】
Communication 题目描述 The Ministry of Communication has an extremely wonderful message system, designed ...
- Java并发AtomicLongArray类
java.util.concurrent.atomic.AtomicLongArray类提供了可以原子读取和写入的底层long类型数组的操作,并且还包含高级原子操作. AtomicLongArray支 ...
- JavaScript HashTable
function HashTable() { var loseHashCode = function(key) { var hash = 0; for (var i = 0; i < key.l ...
- 杯子(glass)
题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...