webpack解析html中图片,[vue]webpack打包
前端打包是什么概念呢? 咱们用webpack工具对js,css,甚至图片进行打包.javascript
es6的语法js模块化用法(仅支持chrome)
按照py的逻辑,诸多的js被main.js调用,而后在html引入,就能够实现js的模块化开发,(互相的导入使用es6的语法), 谷歌浏览器能够识别es6,可是其余的浏览器就不怎么好使了. 大概是如下的一个逻辑.es6的导入须要注意的几个问题
css
- a.js
export let a = "maotai";
export let b = "maomao";
- b.js
export let b = "b.js";
- main.js 将a和b引入
import * as obj1 from "./a.js"
console.log(obj1.a, obj1.b);
import * as obj2 from "./b.js"
console.log(obj2.b);
- index.html,将main.js引入,引入的时候指定type. 谷歌浏览器支持,其余浏览器不必定支持. 后面须要转换成es5,(webpack和诸多插件会上场)
webpack基本使用(将js合成1个供html调用)
为了支持更多的浏览器,咱们须要es6转换为es5,使更通用. 就须要用到webpack,html
组合js css 图片base化(通常低于8k的图), 处理css均为他的强项
前端
- npm run build调用逻辑
1,先找到package.json里的配置build
2,找到build对应的命令webpack, webpack会找./node_modules/./bin/webpack.cmd
3,./node_modules/./bin/webpack.cmd会调用./node_modules/webpack/bin/webpack.js
知道调用逻辑后,就能够问心无愧的去配置玩一玩了.java
- 我用的是webpack3.x版本,如今4.x好像不太同样了
npm init -y
npm install --save-dev webpack@3.8.1
webpack配置文件: webpack.config.js(需在执行命令的当前路径下有这个配置)
package.json -- ./nodemodule/.bin/webpack.cmd -- ./nodemodule/webpack/bin/webpack.js
npm run build
1. package.json
"scripts": {
"build": "webpack", //找到第二步
},
2.查找熟悉路径
.\node_modules\.bin\webpack.cmd //找到 .\node_modules\webpack\bin\webpack.js
执行.\node_modules\webpack\bin\webpack.js时须要在执行目录下有webpack.config.js
- webpack.config.js
1,建立src/main.js src下与main相关的js
2,main.js是入口文件
3,webpack.config里指定入口main.js便可.
let path = require('path');
// console.log(path.resolve('./dist')); //绝对路径转相对路径
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve('./dist') //这里要是绝对路径,./dist/bundle.js
filename: 'bundle.js', //将包打到bundle.js里
}
};
- main.js
let s1 = require('./a.js');
console.log(s1);
- a.js
let s1 = "maomao3";
module.exports = s1;
- index.html
babel转义es6到es5
0, 支持node
1.es6的语法 import //前端用import js
2,node语法 require //后端用require nodejs
1.安装babel(es6转译es5)webpack
- 转译器
- 转译器接口
- 转译器接口插件es2015(es6)
npm i --save-dev babel-core
npm i --save-dev babel-loader
npm i --save-dev babel-preset-es2015 //获得了不少文件夹,使得bable转译器接口识别es6语法
npm i --save-dev webpack@3.12.0
2.配置文件es6
let path = require('path');
// console.log(path.resolve('./dist')); //绝对路径转相对路径
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve('./dist') //必须绝对路径,
filename: 'bundle.js'
},
module: {
rules: [
// 1.匹配全部js 2,用bable-loader来转译(为es5), 3,排除node_modules目录下js
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
};
3.babel-loader的配置文件.babelrc: 目的是加载插件web
$ cat .babelrc
{
"presets": ["es2015"] // 让翻译官拥有解析es6语法的能力.
// 对应babel-preset-es2015插件
}
查看bundle.js能够查看转义为es5的结果.
babel转义es7到es5
npm i --save-dev babel-preset-state-0 //包含stage1 2 3, 注: stage4是另外的
$ cat .babelrc
{
"presets": ["es2015","stage-0"]
}
- main.js里添加es7语句测试
let a = b => c => d => b + c + d;
查看bundle.js能够查看转义为es5的结果.
babel转义css和图片
1.css-loader: 将css解析成模块
2.style-loader: 将css解析的内容插入到style标签
npm i --save-dev css-loader style-loader
- 写index.css
body {
background-color: lavender;
}
- main.js引入
import "./index.css"
- 配置webpack.config.js
module: {
rules: [
// 1.匹配全部js 2,用bable-loader来转译(为es5), 3,排除node_modules目录下js
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
// 1.use是从右往左写 2,先通过css-loader,后通过style-loader
{test: /\.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/}
]
}
- 构建
npm run build
- 查看背景色,发现被改
样式被打到了bundle.js里了
webpack解析less
- 安装less解析器
npm i --save-dev less less-loader
- style.less
html {
body:after{
content:'我爱你';
color:red
}
}
- main.js
import './style.less';
- webpack.config.js
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
- 构建
npm run build
webpack解析图片
- 安装
npm install file-loader url-loader --save-dev
- main.js
// 在js中引入图片须要import,或者写一个线上路径
import page from './2.jpg';
console.log(page); // page就是打包后图片的路径
let img = new Image();
img.src = page; // 写了一个字符串 webpack不会进行查找
document.body.appendChild(img);
- webpack.config.js
// 转化base64只在8192字节一下转化。其余状况下输出图片
{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},
这里图被转成了base64到了js文件里
1,js过大,2,超过8k的通常不须要base64
- webpack.config.js
{test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=8192'},
{test: /\.(eot|svg|woff|woff2|wtf)$/, use: 'url-loader'},
注这里index.html和bundle.js放到同一个目录下(在上图的基础上index.html文件目录作了调整)
webpack解析html
npm install html-webpack-plugin --save-dev
webpack html模板使用
npm install webpack-dev-server --save-dev
- webpack.config.js
let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({ // 自动插入到dist目录中
template:'./src/index.html', // 使用的模板
// filename:'login.html' // 产出的文件名字
})
]
- 查看产出
在模板的基础上加了
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！