准备工作
准备一个空文件夹，然后执行下列命令：
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";
+ }
打包即可，访问网页可以看见图标。
用Cordova打包Vue项目
现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的，有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目
Webpack 打包含动态加载的类库
在编写库的时候，我们有时候会希望按需加载某些依赖，例如如果代码的运行环境不支持某些功能的话，就加载相关的Polyfill。webpack作为当前最流行的打包工具，早已支持动态加载的功能了。本文将讨论一种用webpack打包含动态加载的类库的方法。
webpack如何编译ES6打包
随着ES的普及我们越来越多的开始使用ES6的语法了，当然也随着mvvm框架的流行少不了js模块化，那js模块化又有那些呢？在很早的时候大家都用的命名空间，现在也有人用（库名.类别名.方法名）
解决webpack打包速度慢的解决办法
webpack在打包的时候第一次总是会做很长的准备工作，包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下，这种方式最后让很多人崩溃了觉得webpack一点都不好用
vue实现分环境打包步骤
在新建好的项目中，一般执行npm run build就是打包了，但此时只能打包到一个环境，不同环境需要配置不同的地址，可以手动更改接口的地址，也可以自行配置命令而不需要每次打包进行地址切换
前端js打包工具
打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系。html好比是房子的地基，css和 javascript是房子的建筑材料，这三个部分一起组成个漂亮的房子
vue-cli3.0中自定css、js和图片的打包路径
我们有时候因为一些特殊需求，可能需要将js/css/img等资源文件都打包到根路径下，但vue-cli3.0的路径配置中仅有assetsDir配置项能够配置所有的静态文件所在的文件夹，并不能针对css/js/img等资源文件分别来做设置，那么请看我如何尝试的吧！
Webpack安装配置及打包详细过程
前端经过漫长的发展，涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便，其中，模块化可以使复杂的程序细化成为各个小的文件，而webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目
webpack动态加载打包chunk命名
最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点：
Webpack 打包太慢? 试试 Dllplugin
webpack在build包的时候，有时候会遇到打包时间很长的问题，这里提供了一个解决方案，让打包如丝般顺滑~在用 Webpack 打包的时候，对于一些不经常更新的第三方库
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!