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 和 ...
随机推荐
- nRF24L01+不能接收或接收偶尔异常等问题实战分享
nRF24L01+接收异常问题综述 在调试nRF24L01+无线收发模块的时候,最具标志性的环节就是在接收端可以收到数据.在实际应用调试中,会出现很多意想不到的情况,造成nRF24L01+模块接收端无 ...
- [转]Oracle 11g R2 RAC高可用连接特性 – SCAN详解
原文地址:http://czmmiao.iteye.com/blog/2124373 昨天帮朋友解决11g RAC SCAN问题,当时为这朋友简单解答了一些SCAN特性相关的问题,但我知道这仅仅是 ...
- apicloud含有微信支付。支付宝支付和苹果内购的代码
apicloud含有微信支付.支付宝支付和苹果内购的代码 <!DOCTYPE html> <html> <head> <meta charset=" ...
- [Go] 使用go mod安装beego
需要go升级到1.12或以上 mkdir gomodtest cd gomodtest go mod init gomodtest 创建一个server.go package main import ...
- linux SSH设置
环境:centos7 一. ssh连接超时设置 (1)客户端设置(推荐) 客户端是windows系统 连接工具:SecureCRT 1.SecureCRT客户端->Options(选项)-> ...
- POJ3685Matrix(二分套二分)
传送门 题目大意:N*N的矩阵,a[i][j]=i*i+100000*i+j*j-100000*j+i*j,求矩阵中第K小. N<=5*10^4 题解: 打个表,发现每一列从上往下单调递增. 在 ...
- 【shell脚本】打印九九乘法表
打印九九乘法表 一.seq介绍 seq命令用于以指定增量从首数开始打印数字到尾数,即产生从某个数到另外一个数之间的所有整数,并且可以对整数的格式.宽度.分割符号进行控制 语法: [1] seq [选项 ...
- 第二十一节：Asp.Net Core MVC和WebApi路由规则的总结和对比
一. Core Mvc 1.传统路由 Core MVC中,默认会在 Startup类→Configure方法→UseMvc方法中,会有默认路由:routes.MapRoute("defaul ...
- shell脚本语言与linux命令的联系与区别
使用linux肯定是要会使用命令的,就算提供有用户界面,绝大部分功能还是要通过命令行去操作的.而shell脚本语言也是运行在linux上的脚本语言,对于服务器运维人员也是几乎必须要掌握的.而shell ...
- VS 中批量格式化、删除未使用的 using 语句代码的插件
插件名称:Format All Files 插件地址:https://marketplace.visualstudio.com/items?itemName=munyabe.FormatAllFile ...