webpack和TypeScript
-
-
- 安装webpack相关内容
- 安装TS相关内容
- 配置初始化数据
- 初始化运行展示和目录展示
-
- 安装前端必备神奇lodash测试一下
- entry配置
- index.html模板配置
-
-
- 修改打包出来的index.html的title
- inject注入
- chunks 属性
- 多页面配置
- Tree Shaking-(摇晃无用代码)
-
- 渐进式网络应用程序PWA
-
- Shimming预置全局变量
- 细粒度Shimming-转换this的指向
- 全局Exports
安装webpack相关内容
- npm init -y,自动建立package.json
- npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
安装TS相关内容
- npm i typescript ts-loader -D
配置初始化数据
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/app.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [new HtmlWebpackPlugin()],
};
初始化运行展示和目录展示
- npx webpack
![【webpack】技巧使用_第1张图片](http://img.e-com-net.com/image/info8/fd72ef62643e4a2489567dcf1416620b.jpg)
报错解决(缺失文件配置)
- npx tsc --init
- 自动创建tsconfig.json
- 配置一下:
![【webpack】技巧使用_第2张图片](http://img.e-com-net.com/image/info8/55713887f93043ce89f0795a1c77fbdc.jpg)
![【webpack】技巧使用_第3张图片](http://img.e-com-net.com/image/info8/dfb1d30ba8904f7d95f629549d370df5.jpg)
- 到此,执行npx webpack 即可打包成功
![【webpack】技巧使用_第4张图片](http://img.e-com-net.com/image/info8/ef7907ac09674a3bb92b038e7edad05f.jpg)
安装前端必备神奇lodash测试一下
- npm i lodash -D
- 当你使用相关包,包类型报错的时候
- 原因:缺少ts 相关类型文件
- ts相关类型文件搜索查看引用命令
![【webpack】技巧使用_第5张图片](http://img.e-com-net.com/image/info8/a0bc4650f102405a88a8f7d62ef3b412.jpg)
- npm install --save-dev @types/lodash
![【webpack】技巧使用_第6张图片](http://img.e-com-net.com/image/info8/cb7cec39a6c3430b80b856105b7df852.jpg)
entry配置
- 当入口文件不止一个的时候,想多个文件打在一个里面的时候
![【webpack】技巧使用_第7张图片](http://img.e-com-net.com/image/info8/f2334e3e409046ce8ae7c33420ce8ac5.jpg)
- 当想单独打成文件的时候
- 缺点:这个做法相当于lodash自己打一遍,但ap.ts里有使用会再打一遍,最终main.js体积也会变大
![【webpack】技巧使用_第8张图片](http://img.e-com-net.com/image/info8/0ae99e08bcda43c9ba41bdd04cb187b8.jpg)
- 抽离一下lodash
- 目的:使main.js体积变小
![【webpack】技巧使用_第9张图片](http://img.e-com-net.com/image/info8/dd1a685091304a458a36dbfaf98377cb.jpg)
index.html模板配置
- 没有配置的时候打包出来的index.html
![【webpack】技巧使用_第10张图片](http://img.e-com-net.com/image/info8/4612ab7c9dc347a48706274d30906529.jpg)
- 配置一下
- 新建index.html
![【webpack】技巧使用_第11张图片](http://img.e-com-net.com/image/info8/5fc66e7818df43c9b271c63634e760c9.jpg)
- 导入模块
![【webpack】技巧使用_第12张图片](http://img.e-com-net.com/image/info8/caec5b4d6b2c438db64e3b98eda5e4d9.jpg)
修改打包出来的index.html的title
- 步骤一,将index.html中改为
- webpack内置的属性获取标题
![【webpack】技巧使用_第13张图片](http://img.e-com-net.com/image/info8/fd0b9542df3e4ad5a278a68ae566ed8a.jpg)
<title>
<%=htmlWebpackPlugin.options.title %>
</title>
- 步骤2;
![【webpack】技巧使用_第14张图片](http://img.e-com-net.com/image/info8/c7c0f36ca89c44eebdf7de8a67983a90.jpg)
- 成果展示
![【webpack】技巧使用_第15张图片](http://img.e-com-net.com/image/info8/fb477b105ef147888dfe2606bd2441fd.jpg)
inject注入
chunks 属性
-
没配置前,默认全部
-
有几个入口,引用几个
![【webpack】技巧使用_第16张图片](http://img.e-com-net.com/image/info8/93b680bd77c74940b6ea1b08e995c324.jpg)
-
配置图
![【webpack】技巧使用_第17张图片](http://img.e-com-net.com/image/info8/35b064c6760148d7ace3552468e30e85.jpg)
-
配置后,只留下配置的
![【webpack】技巧使用_第18张图片](http://img.e-com-net.com/image/info8/b0d65293970b4363b0aab621fd73bf1f.jpg)
多页面配置
- 注意点:多页面配置filename属性要有,且不同
- filename如果配置成:“/sh_pc/index.html”,打出的包会在文件夹sh_pc下
plugins: [
new HtmlWebpackPlugin({
title: '乞力马扎罗',
template: './index.html',
inject: 'body',
filename: 'index.html',
chunks: ['main'],
publicPath: 'http://lochost:8080/',
}),
new HtmlWebpackPlugin({
title: '罗马迪克',
template: './index2.html',
inject: 'body',
filename: 'index2.html',
chunks: ['lodash'],
publicPath: 'http://lochost:8081/',
}),
],
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
main: {
import: ['./src/app.ts', './src/app2.ts'],
dependOn: 'lodash',
},
lodash: {
import: 'lodash',
},
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
plugins: [
new HtmlWebpackPlugin({
title: '乞力马扎罗',
template: './index.html',
inject: 'body',
filename: 'sh_pc/index.html',
chunks: ['main'],
publicPath: 'http://lochost:8080/',
}),
new HtmlWebpackPlugin({
title: '罗马迪克',
template: './index2.html',
inject: 'body',
filename: 'sh_oc/index2.html',
chunks: ['lodash'],
publicPath: 'http://lochost:8081/',
}),
],
output: {
clean: true,
},
};
Tree Shaking-(摇晃无用代码)
![【webpack】技巧使用_第23张图片](http://img.e-com-net.com/image/info8/7aeeb8ebe6b7449c9c4cec87f48543e9.jpg)
sideEffects属性
- 在package.json中进行配置,即匹配到的任何css文件都不进行Tree Shaking
![【webpack】技巧使用_第24张图片](http://img.e-com-net.com/image/info8/d421fb1fee844e1398f45cfd57434571.jpg)
渐进式网络应用程序PWA
- 非离线状态运行
- 借助第三方包
- npm i http-server -D
- 配置一下运行脚本
- npm start
![【webpack】技巧使用_第25张图片](http://img.e-com-net.com/image/info8/c6013c6d1694494fac3cf8c44bf3eafc.jpg)
-当他成功启动后,页面展示, 但当你把服务器挂掉,页面就不展示
![【webpack】技巧使用_第26张图片](http://img.e-com-net.com/image/info8/8ede15d8d18544ba970f1d8e9d198a80.jpg)
- 一般来说,启动服务是不会更新包里面的内容,如果你想更新内容
![【webpack】技巧使用_第27张图片](http://img.e-com-net.com/image/info8/426c993c754549ed9efd3eabb86ea63b.jpg)
PWA
- 离线状态运行
- 先安装
- npm i workbox-webpack-plugin -D
- 再配置
![【webpack】技巧使用_第28张图片](http://img.e-com-net.com/image/info8/a731881fd9ce49b297c40181caa992c6.jpg)
- 再运行
![【webpack】技巧使用_第29张图片](http://img.e-com-net.com/image/info8/6857c05a503a414792252a505c31c98a.jpg)
- 页面上监听一下游览器是否支持离线运行
- 想要清除这个离线状态
- 访问chrome://serviceworker-internals/上点一下Unrefister即可
console.log('乞力马扎罗');
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/service-worker.js')
.then((registration) => {
console.log('service-worker registed');
})
.catch((error) => {
console.log('service-worker registed error');
});
});
}
- npm start
![【webpack】技巧使用_第30张图片](http://img.e-com-net.com/image/info8/4cf4e111d98149518332d4af0462407e.jpg)
Shimming预置全局变量
- 旧代码
![【webpack】技巧使用_第31张图片](http://img.e-com-net.com/image/info8/7a2c49bda6d34b2f93526e43006c7598.jpg)
- 新项目
- 本来会报错,但通过预置全局变量配置了就不会
- 配置完,lodash就是全局的了
![【webpack】技巧使用_第32张图片](http://img.e-com-net.com/image/info8/d7c475444a7f4b4a9894243f182075f0.jpg)
- 这样配置即可
![【webpack】技巧使用_第33张图片](http://img.e-com-net.com/image/info8/e2def89954ec477a8150d012ea97bcec.jpg)
细粒度Shimming-转换this的指向
- 有些模块的this指向window对象
- 但实际我们的CommonJS项目中this指向指向的实际位置不是
- 解决方法:
- 通过使用imports-loader覆盖this指向
- 目前问题:
![在这里插入图片描述](http://img.e-com-net.com/image/info8/a83a8cb36e494b2eb6992ffb16782c4d.jpg)
![【webpack】技巧使用_第34张图片](http://img.e-com-net.com/image/info8/e1ad297c36924076a7ccebea4da4e11a.jpg)
- 解决步骤一:
- npm i imports-loader
- 步骤二:配置
![【webpack】技巧使用_第35张图片](http://img.e-com-net.com/image/info8/7b1a4d3574b44f14801cde8289773d08.jpg)
全局Exports
- 第三方模块,你不清楚他是如何导出的
- 故你想使用,但不想导入,想直接使用里面的方法
- 步骤一
- npm i exports-loader -D
- 步骤二
- 新建要导入的文件gloabls.js
const file = '公共的';
const helpers = {
parse() {
console.log('方法');
},
};
- 步骤三
- webpack.config.js里面配置
![【webpack】技巧使用_第36张图片](http://img.e-com-net.com/image/info8/67cb7d2b145046b08209d3964473209f.jpg)
- 步骤四 页面中使用
![【webpack】技巧使用_第37张图片](http://img.e-com-net.com/image/info8/4e57cfa256e74797921b2bd887acb1d9.jpg)
![【webpack】技巧使用_第38张图片](http://img.e-com-net.com/image/info8/54f2225a0f884630883cec4e1d126bd8.jpg)