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 和 ...
随机推荐
- linux内核 mtd分区
首先 内核配置需要打开MTD选项 Memory Technology Devices (MTD) ---> 如果是NOR Flash,需要选择Common Flash Interface (CF ...
- [转]JVM系列四:生产环境参数实例及分析【生产环境实例增加中】
原文地址:http://www.cnblogs.com/redcreen/archive/2011/05/05/2038331.html java application项目(非web项目) 改进前: ...
- JVM运行机制(非原创)
文章大纲 JVM基本概念 JVM的体系结构 JVM启动流程 一.JVM基本概念 Java虚拟机(JVM)是可运行Java代码的假想计算机 Java虚拟机包括类加载器.一组寄存器.方法区.一个垃圾回收堆 ...
- Angular 学习笔记（二）
控制器: 就像 JavaScript 里的构造函数一般,用来增强作用域(scope),当一个控制器通过 ng-controller 指令来添加到 DOM 中时, ng 会调用该控制器的构造函数来生成一 ...
- SQL server 2012 各个版本比较
有关不同版本的 SQL Server 2012 所支持的功能的详细信息. 功能名称 Enterprise 商业智能 Standard Web Express with Advanced Service ...
- 源码编译Kubeadm二进制文件
kubeadm是Kubernetes官方提供的用于快速安装Kubernetes集群的工具,伴随Kubernetes每个版本的发布都会同步更新,kubeadm会对集群配置方面的一些实践做调整,通过实验k ...
- 初学JavaScript正则表达式(十二)
text / exec方法 text() var reg1 = /\w/; var reg2 = /\w/g; reg1.test('a') === true reg2.test('a') === t ...
- Html学习之十八（表格与表单学习--统计表制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Html学习之十四（阴影文字的设计）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【第1题】 Pythonn内存管理以及垃圾回收机制
内存管理 Python解释器由c语言开发完成,py中所有的操作最终都由底层的c语言来实现并完成,所以想要了解底层内存管理需要结合python源码来进行解释. 1. 两个重要的结构体 include/o ...