webpack4 打包静态资源
demo 代码点此，开始之前，先做点准备工作。
准备工作
准备一个空文件夹，然后执行下列命令：
npm init -y
npm i -D webpack webpack-cli
然后创建一个 dist 目录，并在里面创建一个 indedx.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>webpack4 loader 打包静态资源</title>
</head>
<body>
<div id="root"></div>
<!-- 这里引入待会将要打包好的 JS 文件 -->
<script src="./bundle.js"></script>
</body>
</html>
接着创建一个 src 目录，在里面创建一个 lib 文件夹，创建一个 until.js:
// until.js
export function $ (id) {
return document.getElementById(id);
}
export function add (x, y) {
return x + y;
}
再创建 components 文件夹，再写入几个 js:
// Content.js
import { $ } from '../lib/until';
export default function Content () {
let content = document.createElement('div');
content.innerText = 'content';
$('root').appendChild(content);
}
// Footer.js
import { $ } from '../lib/until';
export default function Footer () {
let footer = document.createElement('div');
footer.innerText = 'footer';
$('root').appendChild(footer);
}
// Header.js
import { $ } from '../lib/until';
export default function Header () {
let header = document.createElement('div');
header.innerText = 'header';
$('root').appendChild(header);
}
在 src 下创建 index.js：
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import { $ } from './lib/until';
Header();
Content();
Footer();
配置 webpack
在根目录下，创建 webpack.config.js:
const path = require('path');
module.exports = {
// mode: 'production',
mode: 'development',
// 入口
// entry: './src/index.js',
entry: {
main: './src/index.js',
},
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
然后在 package.json 中的 scripts 中加入：
"scripts": {
...
+ "bundle": "webpack"
},
在终端运行npm run bundle执行打包，然后访问 /dist/index.html即可。
打包图片
执行下列命令：
npm i -D url-loader
然后在 src 下创建 assets/images/ 文件夹，然后放入一张图片即可：
/src/assets/images/webpack.jpg
然后修改 webpack.config.js:
const path = require('path');
module.exports = {
// mode: 'production',
mode: 'development',
// 入口
// entry: './src/index.js',
entry: {
main: './src/index.js',
},
+ module: {
+ rules: [{
+ // 打包图片
+ test: /\.(jpg|png|gif)$/,
+ use: {
+ // loader: 'file-loader',
+ loader: 'url-loader',
+ options: {
+ name: '[name]_[hash].[ext]',
+ outputPath: 'images/',
+ limit: 8192,
+ },
+ },
+ },
+ },
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
再修改 index.js:
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
+ import webpack from './assets/images/webpack.jpg';
import { $ } from './lib/until';
Header();
Content();
Footer();
+ let root = $('root');
+ let img = new Image();
+ img.src = webpack;
+ img.id = 'img';
+ root.appendChild(img);
执行打包即可。
打包css、less、scss
这里仅配置 less，安装 loader：
npm i -D less less-loader css-loader style-loader postcss-loader
在 src 下创建 index.less：
// index.less
body {
background-color: #ffffff;
}
#img {
transform: translate(50px, 0);
}
然后修改 webpack.config.js:
const path = require('path');
module.exports = {
// mode: 'production',
mode: 'development',
// 入口
// entry: './src/index.js',
entry: {
main: './src/index.js',
},
module: {
rules: [{
// 打包图片
test: /\.(jpg|png|gif)$/,
use: {
// loader: 'file-loader',
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 8192,
},
},
},
+ {
+ // 打包 css、less
+ test: /\.(css|less)$/,
+ use: [
+ 'style-loader',
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 2,
+ }
+ },
+ 'less-loader',
+ 'postcss-loader',
+ ],
+ }],
},
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
再修改 index.js:
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import webpack from './assets/images/webpack.jpg';
import { $ } from './lib/until';
+ import './index.less';
Header();
Content();
Footer();
let root = $('root');
let img = new Image();
img.src = webpack;
img.id = 'img';
root.appendChild(img);
安装 autoprefixer 为 css 自动添加浏览器前缀：
npm i -D autoprefixer
然后在根目录创建 postcss.config.js：
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
}
}
接着打包即可。
打包字体文件
安装 loader:
npm i -D file-loader
修改 webpack.config.js:
const path = require('path');
module.exports = {
// mode: 'production',
mode: 'development',
// 入口
// entry: './src/index.js',
entry: {
main: './src/index.js',
},
module: {
rules: [{
// 打包图片
test: /\.(jpg|png|gif)$/,
use: {
// loader: 'file-loader',
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 8192,
},
},
},
{
// 打包 css、less
test: /\.(css|less)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
// css 模块化
// modules: true,
}
},
'less-loader',
'postcss-loader',
],
},
{
+ // 打包字体文件
+ test: /\.(eot|ttf|svg|woff|woff2)$/,
+ use: {
+ loader: 'file-loader',
+ options: {
+ outputPath: 'font/',
+ }
+ },
+ }],
},
// 出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
然后创建文件夹 /src/assets/font/，在里面放一下字体文件，我放的是图标的字体文件。
// 这些是我放入的字体文件
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.woff2
修改 index.js:
import Header from './components/Header';
import Content from './components/Content';
import Footer from './components/Footer';
import webpack from './assets/images/webpack.jpg';
import { $ } from './lib/until';
import './index.less';
Header();
Content();
Footer();
let root = $('root');
let img = new Image();
img.src = webpack;
img.id = 'img';
root.appendChild(img);
+ let div = document.createElement('div');
+ div.classList.add('iconfont', 'icon-chenggong');
+ root.appendChild(div);
再修改 index.less:
body {
background-color: #ffffff;
}
#img {
transform: translate(50px, 0);
}
+ @font-face {font-family: "iconfont";
+ src: url('./assets/font/iconfont.eot?t=1563786008234');
+ src: url('./assets/font/iconfont.eot?t=1563786008234#iefix') format('embedded-opentype'),
+ url('data:application/x-font-woff2;charset=utf-8;base64,') format('woff2'),
+ url('./assets/font/iconfont.woff?t=1563786008234') format('woff'),
+ url('./assets/font/iconfont.ttf?t=1563786008234') format('truetype'),
+ url('./assets/font/iconfont.svg?t=1563786008234#iconfont') format('svg');
+ }
+
+ .iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ .icon-chenggong:before {
+ content: "\e873";
+ }
打包即可，访问网页可以看见图标。
备注
具体可查看 webpack4 官网。
webpack4 打包静态资源的更多相关文章
- vue打包静态资源路径不正确的解决办法
vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...
- vue打包静态资源路径不正确的解决办法【转】
vue项目完成打包上线的时候很多人都会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的assetsPublicPath值改为’. ...
- vue项目之webpack打包静态资源路径不准确
摘自:https://blog.csdn.net/viewyu12345/article/details/83187815 问题 将打包好的项目部署到服务器,发现报错说图片找不到. 静态资源如js访问 ...
- vue打包静态资源后显示空白及static文件路径报错
1.打包之后打开dist的页面显示空白: 这个是打包项目比较常见的一个错误 改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过scr ...
- webpack打包静态资源和动态资源
1.对于静态引用的资源: <img src = "static/modelname/imgname.png"> // 修改为下面的写法 <img src = &q ...
- 动态script标签同步加载 ps：无打包编译，静态实现静态资源入口动态配置，无编译打包静态资源添加版本号
/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...
- eclipse使用maven打包的时候发现静态资源没包含进去
今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install ) 后来发现是因为在pom.xml里没有配置打包静态资源的 ...
- Vue Cli 打包之后静态资源路径不对的解决方法
cli2版本: 将 config/index.js 里的 assetsPublicPath 的值改为 './' . build: { ... assetsPublicPath: './', ... } ...
- ASP.NET MVC 静态资源打包和压缩问题小记
ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...
随机推荐
- RS422接线 z-tek RS232 TO RS485/RS422
接线方式 z-tek 引脚定义
- nginx+php+redis+ssl 配置
php的接触得很少,记录一下 环境:CentOS 7.4 安装软件 # 安装 nginx yum install nginx # 配置PHP7的源,安装 PHP 7.0 及扩展 yum install ...
- mysql查询两张表更改一张表数据
(user 为要更改数据的表 ,set后边需要更改的内容, where后加条件) update user a,user_copy b set a.manager_introduct=b.rwjs wh ...
- Python—基础之杂货铺
列表.元组.字典之前的互相转换 列表与元组的转换 # 列表转换成元组:使用 tuple 函数 num_list = [3, 6, 9] num_tuple = tuple(num_list) prin ...
- [Go] golang实时监控日志文件的包tail
在linux中有一个tail命令,tail -f可以实时的监控文件新增加的内容,如果用代码实现这个逻辑,可以下载使用这个包go get github.com/hpcloud/tail/... 测试代码 ...
- 深入理解JavaScript中的作用域和上下文
介绍 JavaScript中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域.理解作用域将使你的代码脱颖而出,减 ...
- mysql 导入sql文件的几种形式
1.没有登陆mysql的时候以文件的形式导入mysql数据 在students.sql文件中加入这些语句 create table t_student( id int primary key auto ...
- 动态设置html的font-size值
PC端 (function () { function setRootFontSize() { let rem, rootWidth; let rootHtml = document.document ...
- 《计算机网络第7版》PDF+《计算机网络释疑与习题解答第7版》PDF
谢希仁 链接:https://pan.baidu.com/s/1_sM9bFL0y3S1NXBz5rLyvg 提取码:po3i 计算机网络(第7版)谢希仁 · 语雀 https://www.yuque ...
- 解惑：在Ubuntu18.04.2的idea上运行Scala支持的spark程序遇到的问题
解惑:在Ubuntu18.04.2的idea上运行Scala支持的spark程序遇到的问题 一.前言 最近在做一点小的实验,用到了Scala,spark这些东西,于是在Linux平台上来完成,结果一个 ...