内容简介:自己琢磨的一个由于项目是基于typescript的,那我就直接按ts的来(后面再放js的),其实差别不是很大的都是前端项目,只不过ts的解析的是ts-loader,而js则是babel-loader。假设我们的目标文件在src目录中,新建一个index.ts,tsconfig也配置好(tsconfig配置不在本章讨论范围)。index.ts如下:
自己琢磨的一个 项目 ,由于需要频繁的build,且需要http-server启动服务,故折腾弄了webpack的热更新服务。同时,修改配置,使支持打包时加入文件(头)注释。
准备
由于项目是基于typescript的,那我就直接按ts的来(后面再放js的),其实差别不是很大的都是前端项目,只不过ts的解析的是ts-loader,而js则是babel-loader。
假设我们的目标文件在src目录中,新建一个index.ts,tsconfig也配置好(tsconfig配置不在本章讨论范围)。index.ts如下:
class A { private name: string; constructor(name: string) { this.name = name; } showName() { console.log(this.name); } } export default A;
实现了一个很简单的A类并导出。
webpack.config.js内用ts-loader处理ts文件,并在dist目录下生成index.js。
const path = require('path'); module.exports = { // 入口 entry: path.resolve(__dirname, 'src/index.ts'), output: { // 输出文件名 filename:'index.js', // 输出路径 path: path.resolve(__dirname, 'dist'), libraryExport: 'default', // 不写的话,使用时要.default libraryTarget: 'window', library: 'A' }, module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }] } };
package.json中配置:
"start": "webpack --mode=development",
直接npm run start,我们就可以看到在dist下生成了对应的js文件了,再在根目录下创建个index.html,利用http-server就可以访问了,但是开发阶段时,我们往往会多次编译开发文件,可能会比较麻烦,所以webpack-dev-server就有他的用处了。
webpack-dev-server热更新
html-webpack-plugin
启动页面访问,最基础的就是html页面了,所以引入html打包插件。如果看webpack官方教程,这个应该是第一个接触到的插件吧。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // ... plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html'), filename: 'index.html' }) ] // ...
先写好配置,根据配置,发现html的模板是src下的index.html页面,新增并加入基本的head,body等标签。package.json中的scripts下增加:
"dev1": "webpack-dev-server --open"
–open表示新打开浏览器,输入npm run dev1后,就可以正常出现页面了,但是遗憾的是,直接修改index.ts,不能实时更新,还得重新run dev1下。
热更新
webpack.config.js下增加contentBase表示监听的文件夹位置。
devServer: { contentBase: './src' }
script下增加
"dev2": "webpack-dev-server --open --watch --inline"
watch的命令来动态监听文件的改变并实时打包,实现文件修改的监听。
注:好多文章都说仅–watch只是文件的监听,不会去刷新页面,但实际测试,浏览器页面会刷新,我用的是4.29.6的webpack。
inline参数是webpack不同的刷新模式,但此处已经没有啥大用处了,所以不添加了。
到这,webpack热更新的server就搭建完成了。
注释插件
script中增加个
"build": "webpack --mode=production"
命令,npm run build后,我们得到的是一堆啥注释都没有的压缩代码。如果我们在写一些库或插件的时候,需要增加个文件注释,至少得加上版本,地址吧。此时,webpack自带的BannerPlugin插件就派上用场了。
const package = require('./package.json'); new webpack.BannerPlugin(` ${ package.name } - ${ package.description } @version v${ package.version } @homepage ${ package.homepage } @author ${ package.author } <echoweb@126.com> (http://www.zhuyuntao.cn) @license ${ package.license } `)
我们的版本等信息往往都会存在package.json中,打包的时候就只要读取该文件就可以获取正常的信息,故我们只要该package.json里就能一遍更新了。
此时在run build,注释就可以显示了。
注:
- 待打包文件头有注释的化,是不会删掉的,还会出现在打包后的文件中。
- 其他插件有可能会删除本插件生成的注释。
区分dev与prd
如果我们只用一个wepack.config.js时,如何来区分dev下与prd下不同的插件呢?比如开发模式下,需要用到html去调试,发布时,我们只需要编译下文件就行了,这种情况下如何处理。
module.exports = (env, argv) => { // .... }
利用exports函数,argv.mode会返回输入命令时的mode状态,因此可以用来判断不同的模式,并返回不同的配置。
demo地址: github 。
欢迎关注微信公众号[ 我不会前端 ]或扫描下方二维码!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 让 MyBatis Generator 用数据库注释作 Java 注释,并支持附加注解
- TranslationPlugin v2.6.0 发布,支持一键翻译文档注释
- IntelliJ IDEA 2018.2 RC,添加多项注释支持
- IntelliJ IDEA 2018.3 EAP 发布,支持多行 TODO 注释
- YurunOAuthLogin v1.2.3 QQ登录支持unionid,完善注释文档
- PMD 6.5.0 发布,新增检测使用非官方支持注释的规则
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
技术元素
[美] 凯文·凯利 / 张行舟、余倩、周峰、管策、金鑫、曾丹阳、李远、袁璐 / 译言·东西文库/电子工业出版社 / 2012-5 / 55.00元
我会将我不成熟的想法、笔记、内心争论、草稿以及对其他文章的回应都写在《技术元素》中,这样我就能知道自己到底在想些什么。——KK “技术元素”(technium)是凯文•凯利专门创造出来的词语。“技术元素不仅仅包括一些具象的技术(例如汽车、雷达和计算机等),它还包括文化、 法律、社会机构和所有的智能创造物。”简而言之,技术元素就是从人的意识中涌现出来的一切。KK把这种科技的延伸面看成一个能产生......一起来看看 《技术元素》 这本书的介绍吧!