webpack4 打包静态资源
,开始之前,先做点准备工作。
准备工作
准备一个空文件夹,然后执行下列命令:
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"; + }
打包即可,访问网页可以看见图标。
备注
具体可查看 。
上一篇: 监听窗口大小改变,同时根据窗口大小修改某个元素的大小
下一篇: 数据库基本概念(二)